如何构建大型的前端项目
如何构建大型的前端项目
1. 搭建好项目的脚手架
一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。一般脚手架都应当有以下的几个功能：
- 自动化构建代码，比如打包、压缩、上传等功能
- 本地开发与调试，并有热替换与热加载等功能
- 本地接口数据模拟
- css 模块化
- 检查并自动矫正不符合规范的代码，并优化代码格式
社区已有很多模板（boilerplate）或工具帮助我们搭建一个现成的脚手架，比如：
当然，如果这些模板或工具都不能满足你的需求，你也可以搭建自己的脚手架，可以参考：
- 搭建自己的前端脚手架
- 怎样提升代码质量
- CSS 模块化
- css 的弱化与 js 的强化
- 本地化接口模拟、前后端并行开发
2. 定义好项目的目录结构
对于大型目录而言，一个好的目录结构是非常必要的。一个好的目录结构应当具有以下的一些特点：
- 解耦：代码尽量去耦合，这样代码逻辑清晰，也容易扩展
- 分块：按照功能对代码进行分块、分组，并能快捷的添加分块、分组
- 编辑器友好：需要更新功能时，可以很快的定位到相关文件，并且这些文件应该是很靠近的，而不至于到处找文件
可以参考 目录结构优化
3. 做好项目的组件化
这里的组件化，并非框架层面的组件化，而是工程层面的组件化。
当一个项目中的不同的区块需要共用同一段代码，或者不同项目之间需要共享同一个组件的时候，就需要做组件化了。
组件化一般分为项目内的组件化和项目外的组件化。
项目内的组件化是，同一个项目内不同区块共用的代码可以提取出来为一个单独的组件。
项目外的组件化是，跨项目间共享的代码可以提取出来为一个单独的项目，然后如正常的 npm 包一样使用。
可以参考：
- 组件化
- 私有 npm 仓库
4. 封装团队的构建工具
对于多项目而言，不管使用 webpack 还是 rollup 来打包项目，都会面临一些问题：
- 不同项目有不同配置文件，更新配置需要到处改，而且很难保持一致
- 如果有项目的升级，不同区块可能会有不同的配置
这个时候，把配置文件封装成一个项目，然后使用版本化的方式管理，如正常的 npm 包一样使用，就会很方便了。
比如，我的项目都是使用 lila 来构建的。
5. 选好基础 js 框架、ui 框架、页面模板
开始开发前，需要先选好基础 js 框架，比如 react、vue、angular、jquery 等，因为一旦选定，基本上后面都不能更换了，因为更换的成本太大了。
选好基础 js 框架后，可以选一个比较好的 ui 框架，这样可以少写很多代码，可以参考 前端最受欢迎的 UI 框架。
如果页面的定制化程度不高，可以选择一个比较好的页面模板，比如：
6. 测试
一般前端测试分以下几种：
- 单元测试：模块单元、函数单元、组件单元等的单元块的测试
- 集成测试：接口依赖（ajax）、I/O 依赖、环境依赖（localStorage、IndexedDB）等的上下文的集成测试
- 样式测试：对样式的测试
- E2E 测试：端到端测试，也就是在实际生产环境测试整个应用
一般会用到下面的一些工具：
另外，可以参考 聊聊前端开发的测试。
7. 持续集成构建与测试
一般大型工程的的构建与测试都会花很长的时间，在本地做这些事情的话就不太实际，这就需要做持续集成构建与测试了。
持续集成工具用的比较多的：
jenkins 是通用型的工具，可以与 github、bitbucket、gitlab 等代码托管服务配合使用，优点是功能强大、插件多、社区活跃，但缺点是配置复杂、使用难度较高。
gitlab ci 是 gitlab 内部自带的持续集成功能，优点是使用简单、配置简单，但缺点是不及 jenkins 功能强大、绑定 gitlab 才能使用。
另外，如果是开源项目，travis ci 是个不错的选择。
后续
更多博客，查看 https://github.com/senntyou/blogs
版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）