wpack.io 帶你突破 WordPress 前端程式開發的困境

目錄

前些年工作主力還集中在客製化 WordPress 佈景主題開發的時候,就常常被前端程式的開發環境給搞得暈頭轉向,如果只是做些畫面的樣式調整可以直接把 CSS 或 JS 貼在 HTML 裡面就能解決,現在也有很多外掛可以透過視覺化介面來修改樣式,更不用說還有像是 Elementor 這樣的編輯器可用。

但客製化佈景主題的案件都會由設計師產出設計稿,再交由我這邊進行前端程式開發與 WordPress 後端的整合,雖然現在回過頭來看大部分的版型應該都能用 Elementor 來搞定,但我試過幾次後還是喜歡寫程式做網頁的感覺,對我來說要用滑鼠拖拉一堆介面還不如用鍵盤打字來得有效率的多。

早期在做的時候很單純,就是一行一行的把 HTML/CSS/JS 寫出來,然後為了提升開發速度與效率,持續導入新工具、新語法,像是:

  • 把 HTML 換成 Pug,簡化標籤的寫法同時還能引入拆分後的檔案,甚至還能用變數與迴圈
  • 把 CSS 換成 SCSS,支援巢狀寫法、變數、迴圈等等
  • 把 JS 換成 ES6,減少 jQuery 的依賴採用瀏覽器原生支援的 API

當用這些工具寫完程式後必須要把他們轉換回原始的語法,當然這樣的大工程不可能由人工來處理,因此打包程式就是專門處理這些工作,它可以把 SCSS 輸出成 CSS、把 Pug 輸出成 HTML,除此之外它還可以做檔案的壓縮、加密、合併等一堆有的沒的功能,背後運作靠的是裝在電腦裡面的 Node.js 來處理。

我最喜歡打包程式的其中一項功能就是 BroswerSync,它可以偵測當程式碼有所變動時自動重新整理瀏覽器中的頁面,省下打完程式碼按下儲存後切換視窗去重整頁面的時間。打包程式市面上有非常多款,而且全都是免費的,最早我接觸到的是 Gulp,後起之秀 Parcel 打包速度超快而且完全不需要設定,最近一個專案用的是 esbuild,以及我用過幾次後就很不想再碰它的 Webpack。

Webpack 的設定很複雜,操作邏輯跟以前用過的打包工具完全不同,但它是撰寫 React.js 建議的打包程式,而 React.js 是 WordPress 區塊編輯器的框架,而 WordPress 提供的區塊開發工具 @wordpress/create-block 也是採用 Webpack 打包,因此如果想要開發 WordPress 區塊 Webpack 是跑不掉的。

前陣子花了許多時間在研究該如何讓自己寫好的外掛整合 Webpack,因為是已經寫好的東西所以無法採用 WordPress 官方提供的工具,只能從零開始導入,但導入過程一直碰壁,在尋找解答的過程中無意間發現救星: wpack.io

WordPress 無痛導入 Webpack

wpack.io 是由 Swashata Ghosh 所開發的開源工具,專門協助 WordPress 開發者將 Webpack 導入既有的佈景主題或外掛,實測過後發現它有以下幾個優點:

一、接近零配置的設定

輸入安裝指令後它會透過幾個問題來引導基本設定,包含專案名稱、打包輸出的路徑等等,基本上就是一路 Enter 按下去,完成後再安裝他們提供的 Composer 套件來引入打包後的檔案,如果你需要跟我一樣喜歡 BroswerSync 的功能,再多設定本機網址的 Proxy 即可:

安裝 Composer 套件來引入打包後的檔案:

$ composer require wpackio/enqueue

就能用下面的方法來載入 JS 檔:

$enqueue = new \WPackio\Enqueue( 'appName', 'dist', '1.0.0', 'plugin', PLUGIN_PATH );
$assets = $enqueue->enqueue( 'app', 'main' );

設定 JS 的進入點需要到 wpackio.project.js 裡面去指定,如果沒有設定的話會出錯:

設定 BrowserSync 的 Proxy 網址,也就是你本機環境的 WordPress 所在位置,要小心 Port 不要跟其他服務衝到,萬一無法成功開啟把 3000 換成其他數字即可:

二、可自選需要的工具

在使用指令安裝的當下,wpack.io 就會主動詢問你需要配置哪些工具,包含的選項有以下五種:React、Flowtype、Typescript、Sass/SCSS、Less,有需要用到的話再安裝即可:

三、可彈性擴充 Webpack 規則

如果你對於 Webpack 有一定熟悉程度的話,在 wpackio.project.js 裡面都還可以擴充 Webpack 的原生語法,譬如說如果你想要增加 svg-loader 或是 babel 的支援都沒問題:

四、自動產出外掛安裝檔

wpack.io 提供了一個 archive 指令來打包成給使用者安裝的外掛 zip 壓縮檔,在 wpackio.project.js 裡面可以設定輸出的路徑以及要打包進去的檔案或目錄:

這邊要小心 packageDirPath 的雷,因為我在測試的時候是希望把壓縮檔放在外掛的根目錄,所以我把 Path 設定成 「/」,結果在打包前它會先確認目標路徑是否有存在的檔案,有的話就先會先清除既有檔案後再來執行打包動作,我一開始不曉得就直接衝了,結果一不小心就把整個外掛的所有檔案給刪除了…

就這樣,我誤砍了努力開發兩個月的 Side Project,我很想說幸好我有備份,但天殺的剛好就只有這個專案沒備份到,然後換了新電腦後也還沒做 Time Machine,就這樣兩個月的努力一切歸零,我上了非常痛非常痛的一課…


我覺得 wpack.io 除了讓我不用從零開始配置 Webpack 環境外,更大的收穫是可以間接認識目前前端開發所運用的各種工具,它提供了我一個認識前端開發工具的入門,就跟當年學 WordPress 而認識 PHP 一樣,接下來我會把它運用在區塊編輯器的開發上,甚至是整合 WooCommerce Block,有更多心得我再把它分享出來~

wpack.io 的完整文件可以參考這邊:https://wpack.io/guides/getting-started/

文章標籤webpack

目錄

賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

現為全職 WordPress 工程師,網站開發經歷 11 年,專攻前端工程與 WordPress 佈景主題、外掛客製化開發

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!

覺得文章寫得好再幫我鼓個掌吧!

相關文章

如何提升 WordPress REST API 的請求速度

使用勾點 option_active_plugin 來程式化設定需要載入的外掛,藉此在某些特定情境下減少外掛的使用以提升頁面讀取速...

為什麼你不該用 WordPress 的 Meta Query 來做查詢

透過自訂資料表的方式來儲存自訂欄位,對於減輕資料庫的負擔有非常大的幫助,如果是使用 ACF 建立欄位的話市面上也有幾款外掛可以做到...

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

專注於分享 WordPress 開發、接案技巧、專案管理等自由工作者必備知識與心得

© 2022 想點創意科技有限公司

Designed by Hend Design | 隱私權政策

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!