902
技術社區[雲棲]
基於 Laravel 開發 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:https://github.com/zhiyicx/thinksns-plus
最後更新：2017-09-22 16:03:55