文档章节

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

ThinkSNS账号
 ThinkSNS账号
发布于 2017/05/08 15:58
字数 1627
阅读 14
收藏 0
点赞 0
评论 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账号
粉丝 1
博文 162
码字总数 195146
作品 0
东城
ThinkSNS 2018年五一劳动节放假及值班通知!

尊敬商企事业单位及粉丝用户:   感谢大家一直以来对ThinkSNS的支持与信任,ThinkSNS也将一如既往地为大家提供更优质的服务与产品。在此全体ThinkSNS成员祝各位新老客户和广大朋友们五一劳...

ThinkSNS账号 ⋅ 04/25 ⋅ 0

社交系统ThinkSNS Plus 后端1.7.6 与 1.8.0-rc.1更新播报

感谢大家一直以来对ThinkSNS的关注,社交系统ThinkSNS Plus系统一直在不断优化完善。ThinkSNS Plus 后端1.7.6 与 1.8.0-rc.1版 于2018年5月26日发布,后端具体更新详情如下: 社交系统Think...

ThinkSNS账号 ⋅ 05/30 ⋅ 0

2018年4月社群系统ThinkSNS Plus 后端更新播报

2018年4月社群系统ThinkSNS Plus 后端更新播报信息来源:http://www.thinksns.com/reader/184.html ThinkSNS Plus 最新稳定版 1.7.4 和最新预览版 1.8.0-alpha.5 于2018年4月14日发布,后端具...

ThinkSNS账号 ⋅ 04/18 ⋅ 0

微信小程序的入口、核心逻辑及小程序与APP之间的博弈

  什么是微信小程序   内置于微信的云端应用程序,不需要安装、下载,用完即走。与微信订阅号、服务号和企业号属于同等级。小程序、订阅号、服务号、企业号行程了并行的微信生态四大体系...

ThinkSNS账号 ⋅ 05/14 ⋅ 0

如何快速搭建一个社交网站平台?

截至到2017年12月,我国的网民规模已经达到了7.72亿,而手机网民规模也达7.53亿,2017年网络社交娱乐类应用用户规模均保持了高速增长,同时电子商务、网络游戏、网络广告收入水平增速均在20%...

ThinkSNS账号 ⋅ 05/08 ⋅ 0

移动时代下的短视频行业迎来快速发展期

近几年,网络视频直播发展速度非常迅猛发,随着网络视频直播行业的不断成熟,诸如短视频等细分业务也迅速崛起,2017年短视频市场规模达57.3亿,同比增长达183.9%,预计2020年短视频市场规模将...

ThinkSNS账号 ⋅ 06/11 ⋅ 0

美图发力社交行业 用户需求驱动社交化转型

今年4月,美图启用全新品牌标识,同时对美图社交圈功能开启公测。美图秀秀社交圈的推出,为用户提供更丰富的影像服务和社交体验,也标志着美图发力社交,从图片处理工具正式升级为社区平台。...

ThinkSNS账号 ⋅ 05/28 ⋅ 0

短视频APP白热化,泛娱乐社交热度不减

历史总是惊人的相似,在南抖音北快手两大热门短视频社交APP产品激烈竞争中,近日内涵段子责令被永久封停。在整个短视频市场中,老牌短视频APP快手2017年占据着市场份额首位。目前,快手拥有超...

ThinkSNS账号 ⋅ 04/16 ⋅ 0

动态修改 Laravel Config 配置项

感谢以下网站提供的帮助 基于 Laravel 开发过程中,ThinkSNS+ 是如何做到 Laravel 配置可以网站后台配置的。 的 配置文件都是写死在 文件中,一般人需要了解 才能修改其中的配置。修改上线后...

xiaobing1024 ⋅ 05/18 ⋅ 0

社交系统ThinkSNS+第4阶段H5端研发更新发布播报

社交系统ThinkSNS+第4阶段于5月15日更新发布,本次社交系统TS+发布类型:移动端优化,新增功能发布,以下为部分内容,详情如下: 一、优化、调整与修复 以下为本期已记录的部分内容 H5端更新...

ThinkSNS账号 ⋅ 05/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部