如何构建大型的前端项目

1. 搭建好项目的脚手架

一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。一般脚手架都应当有以下的几个功能：

1. 自动化构建代码，比如打包、压缩、上传等功能
2. 本地开发与调试，并有热替换与热加载等功能
3. 本地接口数据模拟
4. css 模块化
5. 检查并自动矫正不符合规范的代码，并优化代码格式

社区已有很多模板（boilerplate）或工具帮助我们搭建一个现成的脚手架，比如：

• create-react-app
• vue-cli
• yeoman
• html5-boilerplate
• react-boilerplate
• hackathon-starter

当然，如果这些模板或工具都不能满足你的需求，你也可以搭建自己的脚手架，可以参考：

• 搭建自己的前端脚手架
• 怎样提升代码质量
• CSS 模块化
• css 的弱化与 js 的强化
• 本地化接口模拟、前后端并行开发

2. 定义好项目的目录结构

对于大型目录而言，一个好的目录结构是非常必要的。一个好的目录结构应当具有以下的一些特点：

1. 解耦：代码尽量去耦合，这样代码逻辑清晰，也容易扩展
2. 分块：按照功能对代码进行分块、分组，并能快捷的添加分块、分组
3. 编辑器友好：需要更新功能时，可以很快的定位到相关文件，并且这些文件应该是很靠近的，而不至于到处找文件

可以参考 目录结构优化

3. 做好项目的组件化

这里的组件化，并非框架层面的组件化，而是工程层面的组件化。

当一个项目中的不同的区块需要共用同一段代码，或者不同项目之间需要共享同一个组件的时候，就需要做组件化了。

组件化一般分为项目内的组件化和项目外的组件化。

项目内的组件化是，同一个项目内不同区块共用的代码可以提取出来为一个单独的组件。

项目外的组件化是，跨项目间共享的代码可以提取出来为一个单独的项目，然后如正常的 npm 包一样使用。

可以参考：

• 组件化
• 私有 npm 仓库

4. 封装团队的构建工具

对于多项目而言，不管使用 webpack 还是 rollup 来打包项目，都会面临一些问题：

1. 不同项目有不同配置文件，更新配置需要到处改，而且很难保持一致
2. 如果有项目的升级，不同区块可能会有不同的配置

这个时候，把配置文件封装成一个项目，然后使用版本化的方式管理，如正常的 npm 包一样使用，就会很方便了。

比如，我的项目都是使用 lila 来构建的。

5. 选好基础 js 框架、ui 框架、页面模板

开始开发前，需要先选好基础 js 框架，比如 react、vue、angular、jquery 等，因为一旦选定，基本上后面都不能更换了，因为更换的成本太大了。

选好基础 js 框架后，可以选一个比较好的 ui 框架，这样可以少写很多代码，可以参考 前端最受欢迎的 UI 框架。

如果页面的定制化程度不高，可以选择一个比较好的页面模板，比如：

• AdminLTE
• vue-element-admin
• gentelella
• ngx-admin
• ant-design-pro

6. 测试

一般前端测试分以下几种：

1. 单元测试：模块单元、函数单元、组件单元等的单元块的测试
2. 集成测试：接口依赖（ajax）、I/O 依赖、环境依赖（localStorage、IndexedDB）等的上下文的集成测试
3. 样式测试：对样式的测试
4. E2E 测试：端到端测试，也就是在实际生产环境测试整个应用

一般会用到下面的一些工具：

• jest
• enzyme
• cypress
• selenium
• puppeteer

另外，可以参考 聊聊前端开发的测试。

7. 持续集成构建与测试

一般大型工程的的构建与测试都会花很长的时间，在本地做这些事情的话就不太实际，这就需要做持续集成构建与测试了。

持续集成工具用的比较多的：

• jenkins
• gitlab ci

jenkins 是通用型的工具，可以与 github、bitbucket、gitlab 等代码托管服务配合使用，优点是功能强大、插件多、社区活跃，但缺点是配置复杂、使用难度较高。

gitlab ci 是 gitlab 内部自带的持续集成功能，优点是使用简单、配置简单，但缺点是不及 jenkins 功能强大、绑定 gitlab 才能使用。

另外，如果是开源项目，travis ci 是个不错的选择。

后续

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）