文档章节

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

ThinkSNS账号
 ThinkSNS账号
发布于 2017/05/08 15:58
字数 1627
阅读 15
收藏 0

在上一篇文章《 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 辅助函数带来的便利。

开源版源码官方正版获取唯一渠道:关注公众号“thinksns”,回复“开源版”即可获得最新源码压缩文件地址。

开源代码仓库:

GitHub:https://github.com/zhiyicx/thinksns-plus(点击star,每日关注开发动态。)

咨询Q Q:3298713109

官网:http://www.thinksns.com/

内测申请方式

  提供个人/企业联系方式及认证信息(实名ID/企业营业执照照片或扫描件)及申请说明,发送邮件至lihecong@zhishisoft.com将有机会获得首批内测资格,名额有限,申请从速。

  参与内测请提供以下资料

  1个可接收验证码的手机号

  1个指定邮箱

  1位测试人员姓名

  1个您喜欢的账号昵称

开源不易,为了争取开源,我们团队做了很多努力。把基于 Laravel 的作品展示在大家面前,之后专栏会持续不断的分享 ThinkSNS+ 开发过程中的技术细节。

© 著作权归作者所有

共有 人打赏支持
ThinkSNS账号
粉丝 5
博文 247
码字总数 323884
作品 0
东城
私信 提问
基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+

ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+。新的产品名字叫做+也就是 Plus ,因为 Th...

ThinkSNS账号
2017/06/14
0
0
ThinkSNS受邀请参加OSC(开源中国)源创会成都站

OSC源创会成都站已于9月23日在成都安悦原舍酒店举行,ThinkSNS受开源中国邀请,参与本次源创汇分享,ThinkSNS作为国内知名开源社交系统,本次主要分享了最新版本ThinkSNS+的最新技术、优势等...

ThinkSNS账号
2017/09/27
0
0
ThinkSNSPlus 技术优势

ThinkSNS产品有哪些特色和优势? ThinkSNS在产品系统研发中始终坚持高性能,高标准,高适用“三高”原则。注重框架,模块,功能,体验4个部分的完整性,关联性,需求有效性。通过市场调研,企...

ThinkSNS账号
10/16
0
0
ThinkSNSPlus 从1.0到2.0

什么是 ThinkSNS+ 09 年,由北京的团队开发了 ThinkSNS 涉足社交开源行业。这么多年累计不少客户。2014-2016,两年都在维护和开发之前基于 TP 的 ThinkSNS , 慢慢的引入新开发概念。终于,在...

ThinkSNS账号
10/12
0
0
社交系统/社群系统ThinkSNS+ alpha.2 版本发布!

其实,alpha.1 早上打的 tag ,晚上因为增加了两个核心功能,所以又打了 alpha.2 tag。 ThinkSNS团队在基于Laravel框架重新开始开发TS最新版本----ThinkSNS+,我们一直很低调,甚至都没有通知...

ThinkSNS账号
2017/06/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

多线程的实现方式

多线程是指 一个程序运行时,产生或使用了不止一个线程。 线程的生命周期是怎么样的,下面这张图我们可以看出些端倪: 这章我们主要讨论多线程实现的方式,基础知识部分我们可以下来再恶补。...

搬砖大侠
7分钟前
0
0
新人千万不要在 Windows 上使用 Ruby on Rails

标题:新人千万不要在 Windows 上使用 Ruby on Rails 副标题:鼓励新人在 Linux 和 Mac 上使用 Ruby on Rails ! 原则:要走寻常路,不要学美特斯邦伟! "在 Windows上 使用 Ruby on Rails "是...

Jason909
15分钟前
0
0
day177-2018-12-14-英语流利阅读-待学习

艾滋病的治愈方法是否触手可及? Daniel 2018-12-14 1.今日导读 几十年来,艾滋病一直是世界上最难对付的“超级绝症”之一,从人类历史上第一次诊断出艾滋病病例的 20 世纪 80 年代早期到 20...

飞鱼说编程
40分钟前
7
0
java 合成两张图片或图片与二维码

java中偶尔会出现需要将一张小图片嵌入大图中或带二维码的海报图片,那么本文就是奔着这个目的来的,直接上腊肉! zxing是生成1D和2D条形或二维码的工具类库,java图形库Graphics2D进行图片的...

貔貅叔
45分钟前
4
0
80后阿里P10,“关老板”如何带着MaxCompute一路升级?

我是个幸运的人。虽然幸运不能被复制,但是眼光和努力可以。 关涛/关老板,80后的阿里P10,阿里巴巴通用计算平台负责人,阿里巴巴计算平台研究员。12年职场人生,微软和阿里的选择。 关涛的花...

阿里云官方博客
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部