摘要：在上一篇文章基于分支，從到，再到，簡(jiǎn)單的介紹了這里分享在開發(fā)過程中，前端選擇的心理活動(dòng)。而作為核心開發(fā)之一，也負(fù)責(zé)前端這塊的開發(fā)。

在上一篇文章《 ThinkSNS+基于Laravel master分支，從1到 0，再到0.1》，簡(jiǎn)單的介紹了 ThinkSNS+ ,這里分享在開發(fā)過程中，前端選擇的心理活動(dòng)。

在 Laravel 中，前端工作流默認(rèn)是由 laravel-mix 包驅(qū)動(dòng)的，集成了 Vue.js。而作為核心開發(fā)之一，也負(fù)責(zé)前端這塊的開發(fā)。其實(shí)，這是seven第一次寫 Vue，之前都是用 React 做開發(fā)。

然后seven和另一個(gè)核心成員 Wayne 在樓道抽煙聊前端這事情，要不要用 Vue,這個(gè)東西對(duì)于我們來說，都沒有做過，我們都只會(huì) React。然后突然Wayne司機(jī)來了一句“玩點(diǎn)沒玩過的嘛”！就這樣，我們決定前端使用 Vue。

跑題了，決定用什么前端框架后，起初是5.3版本的 Laravel 前端構(gòu)建有 gulp 和 webpack 都在里面，然后在 gulpfile.js 里面配置編譯 js，這就不爽了呀，之前用慣了 webpack 也用慣了自動(dòng)導(dǎo)出 css。這家伙不能從js里面抽離css多帶帶打包，樣式，js都是多帶帶編譯的。如何能忍？但是還是忍了，因?yàn)?5.4 即將發(fā)布，因?yàn)榍岸瞬皇?ThinkSNS+ 重點(diǎn)方向，過了很久，5.4 雖然還沒正式發(fā)布，我們決定直接合并。發(fā)現(xiàn) laravel-mix 也是這個(gè)樣子。然后，然后，算了，刪了 laravel-mix 吧，來自于開發(fā) React 經(jīng)驗(yàn)做構(gòu)建的自信，我決定自己做前端構(gòu)建。

好了，開始自己做構(gòu)建了，為了保持js語法的統(tǒng)一性，我們一直都是使用 webpack.config.babel.js 文件名，使用 ES6 語法配置webpack，所以，首先依賴的包是 Babel 各個(gè)包。然后依賴進(jìn)入了 Vue 包，哈哈成功了，可以轉(zhuǎn)換 Vue 了。

高興的太早了，是的，沒有達(dá)到想要的效果。style 也沒有辦法導(dǎo)出為獨(dú)立css。最后利用 vue-cli 生成了一個(gè)example，發(fā)現(xiàn)這個(gè)構(gòu)建也是很多問題。原因嘛，主要是不適合用在 laravel 中。example 的意義在于適合大多數(shù)情況，而我們的需求就是少數(shù)情況，由此踏上了各種文檔閱讀之旅。

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

配置是完成了，強(qiáng)迫癥不能忍什么？使用 laravel-mix 的時(shí)候是可以使用 Laravel 的 mix 函數(shù)的，自己做構(gòu)建，沒法玩了。后來閱讀 laravel-mix 包的代碼，也沒有找到答案，然后拿著 mix-manifest.json 文件反復(fù)研究，突然茅塞頓開，不就是這么一個(gè)文件的事情么？我自己生成他不就完了？

解決方法有了，如何實(shí)現(xiàn)呢？起初在 webpack 配置中的實(shí)現(xiàn)如下：

利用 webpack-stats-plugin 這個(gè)包，自己實(shí)現(xiàn) transform 并把 文件輸出到輸出目錄。

這個(gè)東西一直用了接近兩個(gè)月，直到后來，我們有個(gè)包 「plus-component-web」主要開發(fā)的是 h5 這個(gè)包就是利用 vue-cli 生成的，你想象一下配合laravel后，沒有watch，沒有hot，開發(fā)人員忍了一個(gè)月，每次修改完運(yùn)行 yarn build 看樣子，再修改。最后大功能開發(fā)完成后，調(diào)bug，調(diào)細(xì)節(jié)，簡(jiǎn)直要人崩潰好么。

作為為公司的“前端擔(dān)當(dāng)”用了一個(gè)上午的時(shí)間，刪了 vue-cli 生成的構(gòu)建套裝，自己做了一套。問題出現(xiàn)了，我希望這個(gè)拓展包中，可以和 ThinkSNS+ 的后臺(tái)開發(fā)一樣，可以使用 mix 函數(shù)怎么辦？

總不能在這個(gè)包里面也放上面的 函數(shù)+拓展生成 mix-manifest.json 文件吧？這也太不方便了點(diǎn)。于是決定，我要早輪子，最后在周末的時(shí)候，終于開發(fā)出了一個(gè) webpack 插件 webpack-laravel-mix-manifest

核心代碼如下：

插件的實(shí)現(xiàn)思路來自于 webpack-stats-plugin 這個(gè)包，非常感謝這個(gè)作者。

然后轉(zhuǎn)換方法如下：

我知道，各位看官要吐槽了，這里為啥不用 reduce ?起初，初版真的是 reduce 實(shí)現(xiàn)的，代碼看起來也很好。問題來了，vue的構(gòu)建都是 node 4 起步，如果用 reduce, 至少 node 6 起步了。最后妥協(xié)了，為了保證 node 4 - 7 都能運(yùn)行。用了 for in來生成。

如果你對(duì)比過這個(gè) webpack 插件，你一定發(fā)現(xiàn)了，之前我在 webpack 配置文件中寫的轉(zhuǎn)換函數(shù)其實(shí)是有bug的，例如，我入口不是對(duì)象或者數(shù)組咋辦？我輸出的不是 name.hash 格式怎么辦？都做不到。在 webpack 插件中，解決了這個(gè)問題，最終使用如下：

生成的 mix-manifest.json 如下:

用了 mix 輔助函數(shù)，怎么能不提 熱加載呢？在 Laravel 里面熱加載是很有意思的事情。閱讀 laravel-mix 后問題很簡(jiǎn)單。只要在 webpack 配置中配置如下：

完美，ThinkSNS+,以及拓展包都惠及了，可以盡情享受 mix 輔助函數(shù)帶來的便利。

GitHub:https://github.com/zhiyicx/th...（點(diǎn)擊star，每日關(guān)注開發(fā)動(dòng)態(tài)。）

　　提供個(gè)人／企業(yè)聯(lián)系方式及認(rèn)證信息（實(shí)名ID／企業(yè)營業(yè)執(zhí)照照片或掃描件）及申請(qǐng)說明，發(fā)送郵件至lihecong@zhishisoft.com將有機(jī)會(huì)獲得首批內(nèi)測(cè)資格，名額有限，申請(qǐng)從速。