Webpack 自动化工程

近几年,前端各种框架工具层出不穷,从两三年前还是一个 jQuery 搞定全站,到之后 requirejs/seajsnodegulp/webpackAngular/React/VueRN/weex 的不断涌现,完全颠覆了原来的前端开发模式。

那么这些框架和工具给我们到底带来了什么好处呢?其实我认为最核心莫过于这两点:模块化开发自动化工程。而本次前端重构所围绕的核心问题就是自动化工程,将原有的 gulp 版本的项目利用 webpack 彻底改造,顺利消灭了既繁琐又易错的人工操作。

gulp 版本的痛点

我们先来看下奇货商城之前的开发流程:

 

从上图可以看出,我们奇货前端开发之前存在的一些痛点:

  1. 前端在后端项目里面修改 vm文件联调;

  2. 开发联调需要上传静态资源到测试域名 CDN

  3. 不同目录下的资源还需要在 CDN上传网站上一级一级目录的点开再上传;

  4. 上线前需要人工去替换 vm 文件里的 CDN 路径;

  5. 上线前还需要人工去上传静态资源到正式域名 CDN

  6. 开发模式不支持 es6 转义,导致低端安卓机无法在本地进行前端调试;

  7. gulp-babel 不完全支持 es6 转 es5,导致部分低端安卓机出现各种莫名其妙的问题;

以上这些痛点,造成的重复性无用功,既浪费精力又着实让人蛋疼,而经过这次的框架重构,只需一键操作,就可完成联调和发布的部署。省心省力还不会出错。

如何利用 webpack 做自动化

先看一下改版后,奇货商城的开发流程:

 

从上图可以看到,我们经过改版后做到了:

  1. vm 文件自动生成

  2. 开发联调直接读取本地静态资源

  3. 打包后所有资源在同一级目录,一次性拖拽上传(下个版本将实现前静态资源自动上传)

  4. 只需一行配置项,自动生成对应的线上 CDN 路径

  5. 完美的 babel-loader,**es6 **语法也可在低端安卓机上轻松本地调试;

下面我们看看如何实现。

项目结构

下面是部分主要目录结构:

以上是我们奇商城的前端目录结构。

webpack 的一些必用的 loaderplugin

例如

等等,在这里就不详细展开了。

我们重点说说以下几点核心:

node 脚本调用 webpack

通过 node 脚本来调用 webpack,而不是直接在命令行启动 webpack,会有这么几个用处:

  • 通过 node 启 express 做本地 mock 数据;

  • 开发环境和生产环境的公共配置项,通过webpack-merge模块做抽离,方便维护;

  • 可以设置 node 环境变量,以区分不同环境中的打包配置,这点在后面还有一个大招;这货可以说是整个构建过程里,核心中的核心了。

自动生成  vm、开发环境调用本地资源,以及皮肤文件的管理都有这个插件的功。部分代码:

通过判断 node 环境变量,决定生成 vm 还是本地 html;通过这个插件实现了  js 模块打包,公共模块提取,客户端缓存&增量发布,皮肤文件生成。部分代码:

自动化部署

自动化部署是在打包服务器通过脚本实现的,先通过 npm 命令打包前端工程,然后将代码 copy 到后端工程中,最后打包后端项目,再发布。

 

遇到的困难

公共文件的引入

webpack 官方文档并没有如何引入公共 html 文件的说明,这一点是在翻了 多资料后才发现的,最终的方案是:
去掉 webpack.config.js 文件中配置的全局 html-loader,这样 html 模版文件就不会被 html-loader 解析,我们可以使用 ejs 语法嵌入其他 html 页面和图片资源。因为没了全局的 html-loader 解析 html 文件,使用 ejs 语法嵌入的资源返回的是 ejs 代码,还需要使用 html-loader 来解析成 html 代码。

html-loader!)表示引用 html-loader 这个加载器来解析

但是这样将全局 html-loader 去掉后,又碰到了下面的问题。

jsp 变量的引入

vm 中有时需要直接引用后端的变量,如${cssUrl},就像这样:

 

这时候 webpack 打包居然就报错了,报错了:

 

原因排查

出现这个问题的原因应该是由于 HtmlWebpackPlugin 这个插件引用的模版默认是 ejs,当不使用全局 html-loader 的时候,模板文件其实是以 ejs 解析的,而${cssUrl}在 ejs 中也识别为一个变量,当然就报错了。

解决方法

这过程中,整个周末都在想这个问题,甚至已经开始考虑用 gulp+webpack 的方案了。。又翻了很多资料,突然想到既然是 ejs 模板,可以尝试了一些  ejs 去写,而不是非要把这个模板以 html 的方式  loader 进来,然后就有了如下方法:

这时候就被识别为一个字符串了!成功解决。

进一步探索,巧用 node 环境变量
上面的方法解决的其实也是挺丑的,因为本地开发的时候需要引用本地文件的,上线的时候又得傻乎乎地去一个个地方去替换:

然后马上试了下,在模板文件中用 ejs 去读 node 环境变量
process.env.NODE_ENV,果然能取到值,就有了下面这个相对完美的方案:

其中production就是利用  node 启动  webpack  时配置的,在这里派上了大用场。

End

到这里,我们奇货商城已经实现了前端工程自动化,再也不用一遍又一遍地去 vm 里修改路径,人工去记着改了哪些文件,要上传哪些静态资源。更加不用担心漏传什么资源文件而导致线上 bug 啦

作者:Woodk
出处:http://www.cnblogs.com/woodk/p/7459467.html

技术交流QQ群 :238757010

关注微信公众号Reboot51后台回复 Python、自动化即可获得相应课程的试听资料


 运维自动化班 6 期报名开始

12月17日(周日)

课程大纲  http://51reboot.com/course/devops

文章分类 未分类

发表评论

电子邮件地址不会被公开。

在线交流

数百位业内高手和同行在等你交流
Reboot运维开发分享