基于 Laravel 开发 ThinkSNS+ 中前端的抉择

  • 时间:
  • 浏览:17
  • 来源:uu快3大小_uu快3网站_开奖历史

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 经验做构建的自信,我决定此人 做前端构建。

我知道,各位看官要吐槽了,这里为什么不要 reduce ?起初,初版真的是 reduce 实现的,代码看起来也很好。问題来了,vue的构建就有 node 4 起步,不可能 用 reduce, 相当于 node 6 起步了。最后妥协了,为了保证 node 4 - 7 都能运行。用了 for in来生成。

不可能 你对比过你你這個 webpack 插件,你一定发现了,以前我在 webpack 配置文件中写的转换函数我我随便说说是有bug的,类似,我入口就有对象不可能 数组该为什么我么我办?我输出的就有 name.hash 格式为什么我办?都做不都都可否。在 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

核心代码如下:

生成的 mix-manifest.json 如下:

webpack && Vue 构建的坑

好了,现在现在开始此人 做构建了,为了保持js语法的统一性,亲们突然就有使用 webpack.config.babel.js 文件名,使用 ES6 语法配置webpack,不要 不要 不要 不要 ,首先依赖的包是 Babel 各个包。但会 依赖进入了 Vue 包,哈哈成功了,可不需用转换 Vue 了。

高兴的太早了,是的,这样达到让你的效果。style 也这样土妙招 导出为独立css。最后利用 vue-cli 生成了有俩个多 example,发现你你這個构建也是不要 不要 不要 不要 问題。意味着着着嘛,主而是我 不适合用在 laravel 中。example 的意义在于适合大多数情况报告,而亲们的需求而是我 少数情况报告,由此踏上了各种文档阅读之旅。

最后在 vue-cli 中找到了答案,按照 example 的配置,上加不需用的多余依赖,在 配置中逐步依赖,最终完成(感谢尤大神提供了这样全的配置说明)。

完美,ThinkSNS+,以及拓展包都惠及了,可不需用尽情享受 mix 辅助函数带来的便利。

Hot 热加载

用了 mix 辅助函数,为什么我能不提 热加载呢?在 Laravel 顶端热加载是很有意思的事情。阅读 laravel-mix 后问題很简单。但会 在 webpack 配置中配置如下:

插件的实现思路来自于 webpack-stats-plugin 你你這個包,非常感谢你你這個作者。

但会 转换土妙招 如下:

开源代码仓库:

GitHub:https://github.com/zhiyicx/thinksns-plus

mix-manifest.json

配置是完成了,强迫症不都都可否忍哪此?使用 laravel-mix 的以前是可不需用使用 Laravel 的 mix 函数的,此人 做构建,这样玩了。然后 阅读 laravel-mix 包的代码,也这样找到答案,但会 拿着 mix-manifest.json 文件反复研究,突然茅塞顿开,不而是我 这样有俩个多 文件的事情么?我此人 生成他不就完了?

处置土妙招 有了,如保实现呢?起初在 webpack 配置中的实现如下: