基於 Laravel 開發 ThinkSNS+ 中前端的抉擇（webpack/Vue）踩坑日記

在上一篇文章《 ThinkSNS+基於Laravel master分支，從1到 0，再到0.1》，簡單的介紹了 ThinkSNS+ ,這裡分享在開發過程中，前端選擇的心理活動。

Laravel Mix的放棄

在 Laravel 中，前端工作流預設是由 laravel-mix 包驅動的，整合了 Vue.js。而作為核心開發之一，也負責前端這塊的開發。其實，這是seven第一次寫 Vue，之前都是用 React 做開發。

然後seven和另一個核心成員 Wayne 在樓道抽菸聊前端這事情，要不要用 Vue,這個東西對於我們來說，都沒有做過，我們都只會 React。然後突然Wayne司機來了一句“玩點沒玩過的嘛”！就這樣，我們決定前端使用 Vue。

跑題了，決定用什麼前端框架後，起初是5.3版本的 Laravel 前端構建有 gulp 和 webpack 都在裡面，然後在 gulpfile.js 裡面配置編譯 js，這就不爽了呀，之前用慣了 webpack 也用慣了自動匯出 css。這傢伙不能從js裡面抽離css單獨打包，樣式，js都是單獨編譯的。如何能忍？但是還是忍了，因為 5.4 即將釋出，因為前端不是 ThinkSNS+ 重點方向，過了很久，5.4 雖然還沒正式釋出，我們決定直接合並。發現 laravel-mix 也是這個樣子。然後，然後，算了，刪了 laravel-mix 吧，來自於開發 React 經驗做構建的自信，我決定自己做前端構建。

webpack && Vue 構建的坑

好了，開始自己做構建了，為了保持js語法的統一性，我們一直都是使用 webpack.config.babel.js 檔名，使用 ES6 語法配置webpack，所以，首先依賴的包是 Babel 各個包。然後依賴進入了 Vue 包，哈哈成功了，可以轉換 Vue 了。

高興的太早了，是的，沒有達到想要的效果。style 也沒有辦法匯出為獨立css。最後利用 vue-cli 生成了一個example，發現這個構建也是很多問題。原因嘛，主要是不適合用在 laravel 中。example 的意義在於適合大多數情況，而我們的需求就是少數情況，由此踏上了各種文件閱讀之旅。

最後在 vue-cli 中找到了答案，按照 example 的配置，去掉不需要的多餘依賴，在 配置中逐步依賴，最終完成（感謝尤大神提供了這麼全的配置說明）。

mix-manifest.json

配置是完成了，強迫症不能忍什麼？使用 laravel-mix 的時候是可以使用 Laravel 的 mix 函式的，自己做構建，沒法玩了。後來閱讀 laravel-mix 包的程式碼，也沒有找到答案，然後拿著 mix-manifest.json 檔案反覆研究，突然茅塞頓開，不就是這麼一個檔案的事情麼？我自己生成他不就完了？

解決方法有了，如何實現呢？起初在 webpack 配置中的實現如下：

利用 webpack-stats-plugin 這個包，自己實現 transform 並把 檔案輸出到輸出目錄。

這個東西一直用了接近兩個月，直到後來，我們有個包 「plus-component-web」主要開發的是 h5 這個包就是利用 vue-cli 生成的，你想象一下配合laravel後，沒有watch，沒有hot，開發人員忍了一個月，每次修改完執行 yarn build 看樣子，再修改。最後大功能開發完成後，調bug，調細節，簡直要人崩潰好麼。

作為為公司的“前端擔當”用了一個上午的時間，刪了 vue-cli 生成的構建套裝，自己做了一套。問題出現了，我希望這個擴充包中，可以和 ThinkSNS+ 的後臺開發一樣，可以使用 mix 函式怎麼辦？

總不能在這個包裡面也放上面的 函式+擴充生成 mix-manifest.json 檔案吧？這也太不方便了點。於是決定，我要早輪子，最後在週末的時候，終於開發出了一個 webpack 外掛 webpack-laravel-mix-manifest

核心程式碼如下：

外掛的實現思路來自於 webpack-stats-plugin 這個包，非常感謝這個作者。

然後轉換方法如下：

我知道，各位看官要吐槽了，這裡為啥不用 reduce ?起初，初版真的是 reduce 實現的，程式碼看起來也很好。問題來了，vue的構建都是 node 4 起步，如果用 reduce, 至少 node 6 起步了。最後妥協了，為了保證 node 4 - 7 都能執行。用了 for in來生成。

如果你對比過這個 webpack 外掛，你一定發現了，之前我在 webpack 配置檔案中寫的轉換函式其實是有bug的，例如，我入口不是物件或者陣列咋辦？我輸出的不是 name.hash 格式怎麼辦？都做不到。在 webpack 外掛中，解決了這個問題，最終使用如下：

生成的 mix-manifest.json 如下:

Hot 熱載入

用了 mix 輔助函式，怎麼能不提 熱載入呢？在 Laravel 裡面熱載入是很有意思的事情。閱讀 laravel-mix 後問題很簡單。只要在 webpack 配置中配置如下：

完美，ThinkSNS+,以及擴充包都惠及了，可以盡情享受 mix 輔助函式帶來的便利。

開原始碼倉庫：

GitHub:（點選star，每日關注開發動態。）

官網：http:///

內測申請方式

　　提供個人／企業聯絡方式及認證資訊（實名ID／企業營業執照照片或掃描件）及申請說明，傳送郵件至lihecong@zhishisoft.com將有機會獲得首批內測資格，名額有限，申請從速。

　　參與內測請提供以下資料

　　1個可接收驗證碼的手機號

　　1個指定郵箱

　　1位測試人員姓名

　　1個您喜歡的賬號暱稱

開源不易，為了爭取開源，我們團隊做了很多努力。把基於 Laravel 的作品展示在大家面前，之後專欄會持續不斷的分享 ThinkSNS+ 開發過程中的技術細節。