脚本宝典收集整理的这篇文章主要介绍了

基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【社交系统研发日记二】

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>在上一篇文章<a href="http://www.thinksns.com/reader/58.html" rel="nofollow noreferrer" target="_blank">《 ThinkSNS+基于Laravel master分支,从1到 0,再到0.1》</a>,简单的介绍了 Th<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>kSNS+ ,这里分享在开发过程中,前端选择的心理活动。</p> <h2 id="articleHeader0">Laravel Mix的放弃</h2> <p>在 Laravel 中,前端工作流默认是由 laravel-mix 包驱动的,集成了 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.js。而作为核心开发之一,也负责前端这块的开发。其实,这是seven第一次写 Vue,之前都是用 <a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a> 做开发。</p> <p>然后seven和另一个核心成员 Wayne 在楼道抽烟聊前端这事情,要不要用 Vue,这个东西对于我们来说,都没有做过,我们都只会 React。然后突然Wayne司机来了一句“玩点没玩过的嘛”!就这样,我们决定前端使用 Vue。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe id="aswift_4" name="aswift_4" width="697" height="175" frameborder="0" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-6330872677300335&amp;output=html&amp;h=175&amp;adk=1934095149&amp;adf=377590429&amp;w=697&amp;lmt=1557232874&amp;num_ads=1&amp;sem=mc&amp;pwprc=5909933996&amp;guci=2.2.0.0.2.2.0.0&amp;ad_type=text&amp;format=697x175&amp;url=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000009633058&amp;flash=0&amp;pra=3&amp;wgl=1&amp;fa=27&amp;adsid=NT&amp;dt=1557232874373&amp;bpp=1&amp;bdt=1109&amp;idt=-M&amp;shv=r20190429&amp;cbv=r20190131&amp;saldr=aa&amp;abxe=1&amp;prev_fmts=0x0%2C970x90%2C728x90&amp;nras=2&amp;correlator=803196853381&amp;frm=20&amp;pv=1&amp;ga_vid=944744259.1557232874&amp;ga_sid=1557232874&amp;ga_hid=521719722&amp;ga_fc=0&amp;iag=0&amp;icsg=4966623360&amp;dssz=37&amp;mdo=0&amp;mso=8&amp;u_tz=480&amp;u_his=1&amp;u_java=0&amp;u_h=1080&amp;u_w=1920&amp;u_ah=1040&amp;u_aw=1920&amp;u_cd=24&amp;u_nplug=1&amp;u_nmime=1&amp;adx=31&amp;ady=838&amp;biw=1001&amp;bih=717&amp;scr_x=0&amp;scr_y=0&amp;eid=20040013%2C21060853&amp;oid=3&amp;ref=https%3A%2F%2Fsegmentfault.com%2Fsearch%3Fq%3Dvue%26type%3Darticle%26page%3D153&amp;rx=0&amp;eae=0&amp;fc=1424&amp;brdim=447%2C192%2C447%2C192%2C1920%2C0%2C1018%2C717%2C1018%2C717&amp;vis=1&amp;rsz=%7C%7Cs%7C&amp;abl=NS&amp;fu=8216&amp;bc=13&amp;osw_key=3581259108&amp;ifi=4&amp;uci=4.bfz3x7q1hf5e&amp;xpc=58ohxvdu0Q&amp;p=https%3A//segmentfault.com&amp;dtd=4" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" data-google-container-id="4.bfz3x7q1hf5e" data-load-complete="true" data-google-query-id="CIW5lZe5ieICFQQkYAodFlMG8Q"></iframe></ins></ins></ins></div> <p>跑题了,决定用什么前端框架后,起初是5.3版本的 Laravel 前端构建有 gulp 和 webpack 都在里面,然后在 gulpfile.js 里面配置编译 js,这就不爽了呀,之前用惯了 webpack 也用惯了自动导出 css。这家伙不能从js里面抽离css单独打包,样式,js都是单独编译的。如何能忍?但是还是忍了,因为 5.4 即将发布,因为前端不是 ThinkSNS+ 重点方向,过了很久,5.4 虽然还没正式发布,我们决定直接合并。发现 laravel-mix 也是这个样子。然后,然后,算了,删了 laravel-mix 吧,来自于开发 React 经验做构建的自信,我决定自己做前端构建。</p> <h2 id="articleHeader1">webpack &amp;&amp; Vue 构建的坑</h2> <p>好了,开始自己做构建了,为了保持js语法的统一性,我们一直都是使用 webpack.config.<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>.js 文件名,使用 ES6 语法配置webpack,所以,首先依赖的包是 Babel 各个包。然后依赖进入了 Vue 包,哈哈成功了,可以转换 Vue 了。</p> <p>高兴的太早了,是的,没有达到想要的效果。style 也没有办法导出为独立css。最后利用 vue-cli 生成了一个example,发现这个构建也是很多问题。原因嘛,主要是不适合用在 laravel 中。example 的意义在于适合大多数情况,而我们的需求就是少数情况,由此踏上了各种文档阅读之旅。</p> <p>最后在 vue-cli 中找到了答案,按照 example 的配置,去掉不需要的多余依赖,在 配置中逐步依赖,最终完成(感谢尤大神提供了这么全的配置说明)。</p> <h2 id="articleHeader2">mix-man<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>est.json</h2> <p>配置是完成了,强迫症不能忍什么?使用 laravel-mix 的时候是可以使用 Laravel 的 mix 函数的,自己做构建,没法玩了。后来阅读 laravel-mix 包的代码,也没有找到答案,然后拿着 mix-manifest.json 文件反复研究,突然茅塞顿开,不就是这么一个文件的事情么?我自己生成他不就完了?</p> <p>解决方法有了,如何实现呢?起初在 webpack 配置中的实现如下:</p> <p><span class="img-wrap"><img data-src="/img/bVOz8X?w=772&amp;h=548" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>利用 webpack-stats-<a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a> 这个包,自己实现 trans<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a> 并把 文件输出到输出目录。</p> <p>这个东西一直用了接近两个月,直到后来,我们有个包 「plus-component-web」主要开发的是 h5 这个包就是利用 vue-cli 生成的,你想象一下配合laravel后,没有watch,没有hot,开发人员忍了一个月,每次修改完运行 yarn build 看样子,再修改。最后大功能开发完成后,调bug,调细节,简直要人崩溃好么。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_5_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_5_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe id="aswift_5" name="aswift_5" width="697" height="175" frameborder="0" src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-6330872677300335&amp;output=html&amp;h=175&amp;adk=1934095149&amp;adf=3696075757&amp;w=697&amp;lmt=1557232874&amp;num_ads=1&amp;sem=mc&amp;pwprc=5909933996&amp;guci=2.2.0.0.2.2.0.0&amp;ad_type=text&amp;format=697x175&amp;url=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000009633058&amp;flash=0&amp;pra=3&amp;wgl=1&amp;fa=27&amp;adsid=NT&amp;dt=1557232874380&amp;bpp=1&amp;bdt=1115&amp;idt=-M&amp;shv=r20190429&amp;cbv=r20190131&amp;saldr=aa&amp;abxe=1&amp;prev_fmts=0x0%2C970x90%2C728x90%2C697x175&amp;nras=3&amp;correlator=803196853381&amp;frm=20&amp;pv=1&amp;ga_vid=944744259.1557232874&amp;ga_sid=1557232874&amp;ga_hid=521719722&amp;ga_fc=0&amp;iag=0&amp;icsg=39326361728&amp;dssz=38&amp;mdo=0&amp;mso=8&amp;u_tz=480&amp;u_his=1&amp;u_java=0&amp;u_h=1080&amp;u_w=1920&amp;u_ah=1040&amp;u_aw=1920&amp;u_cd=24&amp;u_nplug=1&amp;u_nmime=1&amp;adx=31&amp;ady=2084&amp;biw=1001&amp;bih=717&amp;scr_x=0&amp;scr_y=0&amp;eid=20040013%2C21060853&amp;oid=3&amp;ref=https%3A%2F%2Fsegmentfault.com%2Fsearch%3Fq%3Dvue%26type%3Darticle%26page%3D153&amp;rx=0&amp;eae=0&amp;fc=1424&amp;brdim=447%2C192%2C447%2C192%2C1920%2C0%2C1018%2C717%2C1018%2C717&amp;vis=1&amp;rsz=%7C%7Cs%7C&amp;abl=NS&amp;fu=8216&amp;bc=13&amp;osw_key=3581259108&amp;ifi=5&amp;uci=5.ve8tqfofdhow&amp;xpc=AR0OKJwqKX&amp;p=https%3A//segmentfault.com&amp;dtd=3" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" data-google-container-id="5.ve8tqfofdhow" data-load-complete="true" data-google-query-id="CJvJlZe5ieICFc5wYAodFsELCA"></iframe></ins></ins></ins></div> <p>作为为公司的“前端担当”用了一个上午的时间,删了 vue-cli 生成的构建套装,自己做了一套。问题出现了,我希望这个拓展包中,可以和 ThinkSNS+ 的后台开发一样,可以使用 mix 函数怎么办?</p> <p>总不能在这个包里面也放上面的 函数+拓展生成 mix-manifest.json 文件吧?这也太不方便了点。于是决定,我要早轮子,最后在周末的时候,终于开发出了一个 webpack 插件 webpack-laravel-mix-manifest</p> <p>核心代码如下:<br /><span class="img-wrap"><img data-src="/img/bVOz8Y?w=771&amp;h=909" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>插件的实现思路来自于 webpack-stats-plugin 这个包,非常感谢这个作者。</p> <p>然后转换方法如下:<br /><span class="img-wrap"><img data-src="/img/bVOz9c?w=961&amp;h=863" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>我知道,各位看官要吐槽了,这里为啥不用 reduce ?起初,初版真的是 reduce 实现的,代码看起来也很好。问题来了,vue的构建都是 <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a> 4 起步,如果用 reduce, 至少 node 6 起步了。最后妥协了,为了保证 node 4 - 7 都能运行。用了 <a href="http://www.js-code.com/tag/for" title="浏览关于“for”的文章" target="_blank" class="tag_link">for</a> in来生成。</p> <p>如果你对比过这个 webpack 插件,你一定发现了,之前我在 webpack 配置文件中写的转换函数其实是有bug的,例如,我入口不是对象或者<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>咋办?我输出的不是 <a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>.hash 格式怎么办?都做不到。在 webpack 插件中,解决了这个问题,最终使用如下:</p> <p><span class="img-wrap"><img data-src="/img/bVOz9i?w=861&amp;h=222" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>生成的 mix-manifest.json 如下:<br /><span class="img-wrap"><img data-src="/img/bVOz9m?w=862&amp;h=173" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h2 id="articleHeader3">Hot 热加载</h2> <p>用了 mix 辅助函数,怎么能不提 热加载呢?在 Laravel 里面热加载是很有意思的事情。阅读 laravel-mix 后问题很简单。只要在 webpack 配置中配置如下:</p> <p><span class="img-wrap"><img data-src="/img/bVOz9F?w=861&amp;h=271" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span><br />完美,ThinkSNS+,以及拓展包都惠及了,可以尽情享受 mix 辅助函数带来的便利。</p> <h2 id="articleHeader4">开源代码仓库</h2> <p>GitHub:<a href="https://github.com/zhiyicx/thinksns-plus" rel="nofollow noreferrer" target="_blank"></a><a href="https://github.com/zhiyicx/thinksns-plus" rel="nofollow noreferrer" target="_blank">https://github.com/zhiyicx/th...</a>(点击star,每日关注开发动态。)</p> <h2 id="articleHeader5">内测申请方式</h2> <p>  提供个人/企业联系方式及认证信息(实名ID/企业营业执照照片或扫描件)及申请说明,发送邮件至lihecong@zhishisoft.com将有机会获得首批内测资格,名额有限,申请从速。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【社交系统研发日记二】

全部内容,希望文章能够帮你解决

基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【社交系统研发日记二】

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过