基於 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:https://github.com/zhiyicx/th...（點擊star，每日關注開發動態。）

內測申請方式

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