现在的前端早已不是几年前的前端，再也不是jQuery加一个插件就能解决问题的时代。

最近对公司前端的开发进行了一系列的改造，初步达到了我想要的效果，但是未来还需要更多的改进。最终要完美的实现目标：工程化，模块化，组件化。

这是一个艰难的，持续的，不断进化的过程！

先说下我司前端改造前的情况：

开始的时候，只有微信公众号开发，以及在APP中嵌入的Web页面，只需要考虑微信端的问题，以及跟原生APP的交互处理，一切都好像很完美。

几个月后，要开发手机网页版，接着百度直达号也来了。原来微信端的功能已经比较多，不可能针对这2个端再重新开发，于是把微信端的代码拷贝2份，然后修改一下就上线了（初创公司功能要快速上线，有时不会考虑太多的技术架构，都懂的）。

这样就出现了6个不同的项目文件夹，为什么会是6个呢？因为也分别拷贝出了各自的测试目录：

 

1 2 3 4 5 6

/wap /waptest /m /mtest /baidu /baidutest

 

于是，问题就来了，开发的时候，都在其中一个test目录下开发，比如waptest，开发测试没问题了，就拷贝修改的代码到其它的目录。这样开发的痛苦，可想而知了。

不仅仅是各个端的js，css，images文件是分别存放，还有各个端的页面模板也是在各自的目录下。

另外，一直以来，公司的前端美女会使用grunt做一些简单的前端构建，比如sass编译，css合并等，但离我想要的前端自动化/工程化还是有点远。

为了提高前端的工作效率，最近终于有一点时间腾出手来处理这些问题。

PS：我们团队组建一年多，项目也从0开始，到现在为止，产品/开发/项目管理等都在逐渐完善。走专业化道路，是我一直以来的目标，有兴趣的可以加我一起交流！

问题总结

先来总结一下改造前前端开发存在的问题：

1. 同时存在多端，造成开发效率不高
2. 项目没有模块化，组件化的概念，代码复用率低
3. 部署困难，没有自动生成版本号，每次都要手动修改js的版本号
4. 面条式的代码，开发任务重，没有做很好的规划

改进目标

有问题，那就想办法去解决它：

1. 解决多端统一的问题，一处修改，多端同时生效
2. 模块化开发，使代码逻辑更加清晰，更好维护
3. 组件化开发，增强扩展性
4. 按需打包，以及自动构建
5. 自动更新js版本号，实现线上自动更新缓存资源
6. 紧跟发展趋势，使用ES6进行开发

在改进的过程中，会用到2个工具： Gulp和Webpack。用这2个工具，也是有原因的。

本来我想在Grunt的基础上利用Browserify进行模块化打包，但是发现打包的速度太慢，我的Linux系统编译要4s以上，美女前端的Widnows系统一般都要7s以上，这简直不能忍受。在试用Gulp之后发现速度杠杠的，不用想了，立刻替换Grunt。至于Webpack，是因为用browserify打包多个入口的文件配置比较麻烦，在试用了Webpack之后，发现Webpack的功能比browserify强大很多，于是就有了这2个工具的组合。Webpack的配置比较灵活，但是带来的结果就是比较复杂，在项目中，我也仅仅用到了它的模块化打包。

于是，最终初步实现前端构建的方案是：

Gulp进行JS/CSS压缩，代码合并，代码检查，sass编译，js版本替换等，Webpack只用来进行ES6的模块化打包。

现在前端的操作很简单：

开发的时候，执行以下命令，监听文件，自动编译：

 

1	$ gulp build:dev

 

开发测试完成，执行以下命令，进行编译打包，压缩，js版本替换等：

 

1	$ gulp build:prod

 

从此，前端开发可以专心地去写代码了！

方案实现

项目结构

整个项目是基于Yii2这个框架，相关的目录结构如下：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

common/ pages/ user/ index/ cart/ wap/ modules/ user/ index/ cart/ web/ dev/ index/ user/ cart/ common/ lib/ dist/ logs/ gulp/ tasks/ utils/ config.js config.rb node_modules/ index.php package.json gulpfile.js webpack.config.js .eslintrc

 

• common/pages存放公共模板，各个端统一调用
• web/dev是开发的源码，包含了js代码，css代码，图片文件，sass代码
• web/dist是编译打包的输出目录

统一多端的问题

由于多端的存在，导致开发一个功能，要开发人员去手动拷贝代码到不同的目录，同时还要针对不同的端再做修改。

js文件，css文件，图片文件，还有相关的控制器文件，模板文件都分散在不同的目录，要拷贝，耗时间不说，而且容易出错遗漏。

要解决这个问题，有2种方法：

• 所有端调用公共的文件
• 在某个端开发，开发完成之后，用工具自动拷贝文件，并且自动替换相关调用

在综合考虑了之后，这2种方法同时使用，模板文件多端公共调用，其它的文件，通过命令自动拷贝到其它端的目录。

公共模板放到目录common/pages，按模块进行划分，重写了下Yii2的View类，各个端都可以指定是否调用公共模板。

 

1 2 3 4 5 6 7

public function actionIndex() { $this->layout = '/main-new'; return $this->render('index', [ '_common' => true, // 通过该值的设置，调用公共模板 ]); }

 

模板一处修改，多端生效。

另外，其它文件通过gulp去拷贝到不同的目录，例如：

 

1	$ gulp copy:dist -f waptest -t wap

 

这里有一个前提就是，所有编译打包出来的文件都是在dist文件夹，包含了js代码，css代码，图片文件等。

组件化开发

这个只能说是未来努力的一个目标。现阶段还没能很好地实现。这里单独列出这一点，是希望给大家一点启发，或者有哪路高手给我一点建议。

看了网上诸路大神的言论，总结了下前端的组件化开发思想：

• 页面上的每个独立的可视/可交互区域视为一个组件
• 每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护
• 组件与组件之间可以 自由组合
• 页面只不过是组件的容器，负责组合组件形成功能完整的界面
• 当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换

其中，各个组件单独的目录，包含了js代码，样式，页面结构。这样就把各个功能单元独立出来了。不仅维护方便，而且通用性高。

最终，整个Web应用自上而下是这样的结构：