在之前的文章《 ThinkSNS+基于Laravel master分支，从1到 0，再到0.1》中简单介绍了ThinkSNS+。这里分享一下前端选型在开发过程中的心智活动。放弃LaravelMix在Laravel中，前端工作流默认由laravel-mix包驱动，集成了Vue.js。作为核心开发之一，同时负责前端开发。其实小七是第一次写Vue，之前也是用React开发的。然后七和另一个核心成员Wayne在楼道里抽烟聊前端，要不要用Vue，这个东西我们从来没有做过，我们都只知道React。然后司机韦恩突然说“玩你以前没玩过的东西”！就这样，我们决定前端使用Vue。题外话，决定用什么前端框架后，一开始5.3版本的Laravel前端搭建里面有gulp和webpack，然后在gulpfile.js里配置编译js，难受。在自动导出css之前，我曾经使用过webpack。这家伙不会把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了。高兴的太早了，是的，没有达到预期的效果。无法将样式导出为独立的css。最后用vue-cli生成了一个例子，发现这个构建也有很多问题。原因是不适合在laravel中使用。example的意思是它适用于大多数情况，而我们的需求是少数情况，于是我们踏上了阅读各种文档的旅程。最后在vue-cli中找到了答案。按照例子的配置，去除不必要的冗余依赖，逐步依赖配置，最终完成（感谢游大神提供如此完整的配置说明）。mix-manifest.json配置完毕，强迫症有什么受不了的？在使用laravel-mix的时候，可以使用Laravel的mix功能，自己搭建是玩不了的。后来看了laravel-mix包的代码，也没有找到答案。然后我拿着mix-manifest.json文件反复研究。突然，我恍然大悟。不就是这么一个文件吗？我自己生成他不就完了吗？有解决办法，如何实现呢？webpack配置中初步实现如下：使用webpack-stats-plugin包，自己实现transform，将文件输出到output目录。这个东西用了快两个月了，直到后来有了一个主要开发h5的包“plus-component-web”。这个包是使用vue-cli生成的。试想一下，没有watch，没有Hot，开发者忍了一个月，每次修改完，跑yarnbuild看看长啥样，再修改。最后，主要功能开发完成后，调试BUG，调整细节会让人崩溃好吗？作为公司的“前端负责人”，花了一上午的时间把vue-cli生成的buildkit删掉，自己做了一套。问题来了，希望这个扩展包能像ThinkSNS+后台开发一样使用，能使用mix功能怎么办？总不能把上面的function+extension放在这个package里面生成一个mix-manifest.json文件吧？这太不方便了。于是我决定，我要早点下手，终于在周末的时候，终于开发了一个webpack插件webpack-laravel-mix-manifest。核心代码如下：插件的实现思路来自包webpack-stats-plugin。非常感谢这位作者。那么转换方法如下：我知道，评委要吐槽了，这里为什么不用reduce？最开始第一个版本真的是reduce实现的，代码看着还不错。问题来了，vue的构建是从4号节点开始的，如果使用reduce，至少要从6号节点开始。最后妥协，以保证节点4-7可以运行。用于生成。如果你对比过这个webpack插件，你一定发现我之前写在webpack配置文件中的转换函数其实是有bug的。例如，如果我的条目不是对象或数组怎么办？输出不是name.hash格式怎么办？做不到。在webpack插件中解决了这个问题，最终使用如下：生成的mix-manifest.json如下：Hot热加载使用了mix辅助功能，怎么能不提热加载呢？热重载是Laravel中一件有趣的事情。看完laravel-mix问题就简单了。只要在webpack配置中配置如下：perfect、ThinkSNS+、扩展包都受益，就可以享受mix辅助功能带来的便利。开源代码仓库GitHub：https://github.com/zhiyicx/th...（点击star，每天关注发展动态。）内测申请方法 提供个人/企业联系方式和认证信息（实名身份证/营业执照照片或扫描件）及申请须知，发送邮件至lihecong@zhishisoft.com即有机会获得首批内测资格，名额有限，从速申请尽可能。
