摘要：如何构建大型的前端项目搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。组件化一般分为项目内的组件化和项目外的组件化。
如何构建大型的前端项目 1. 搭建好项目的脚手架
一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。一般脚手架都应当有以下的几个功能：
自动化构建代码，比如打包、压缩、上传等功能
本地开发与调试，并有热替换与热加载等功能
本地接口数据模拟
css 模块化
检查并自动矫正不符合规范的代码，并优化代码格式
社区已有很多模板（boilerplate）或工具帮助我们搭建一个现成的脚手架，比如：
create-react-app
vue-cli
yeoman
html5-boilerplate
react-boilerplate
hackathon-starter
当然，如果这些模板或工具都不能满足你的需求，你也可以搭建自己的脚手架，可以参考：
搭建自己的前端脚手架
怎样提升代码质量
CSS 模块化
css 的弱化与 js 的强化
本地化接口模拟、前后端并行开发
2. 定义好项目的目录结构对于大型目录而言，一个好的目录结构是非常必要的。一个好的目录结构应当具有以下的一些特点：
解耦：代码尽量去耦合，这样代码逻辑清晰，也容易扩展
分块：按照功能对代码进行分块、分组，并能快捷的添加分块、分组
编辑器友好：需要更新功能时，可以很快的定位到相关文件，并且这些文件应该是很靠近的，而不至于到处找文件
可以参考 目录结构优化
3. 做好项目的组件化这里的组件化，并非框架层面的组件化，而是工程层面的组件化。
当一个项目中的不同的区块需要共用同一段代码，或者不同项目之间需要共享同一个组件的时候，就需要做组件化了。
组件化一般分为项目内的组件化和项目外的组件化。
项目内的组件化是，同一个项目内不同区块共用的代码可以提取出来为一个多带带的组件。
项目外的组件化是，跨项目间共享的代码可以提取出来为一个多带带的项目，然后如正常的 npm 包一样使用。
可以参考：
组件化
私有 npm 仓库
4. 封装团队的构建工具对于多项目而言，不管使用 webpack 还是 rollup 来打包项目，都会面临一些问题：
不同项目有不同配置文件，更新配置需要到处改，而且很难保持一致
如果有项目的升级，不同区块可能会有不同的配置
这个时候，把配置文件封装成一个项目，然后使用版本化的方式管理，如正常的 npm 包一样使用，就会很方便了。
比如，我的项目都是使用 lila 来构建的。
5. 选好基础 js 框架、ui 框架、页面模板开始开发前，需要先选好基础 js 框架，比如 react、vue、angular、jquery 等，因为一旦选定，基本上后面都不能更换了，因为更换的成本太大了。
选好基础 js 框架后，可以选一个比较好的 ui 框架，这样可以少写很多代码，可以参考 前端最受欢迎的 UI 框架。
如果页面的定制化程度不高，可以选择一个比较好的页面模板，比如：
AdminLTE
vue-element-admin
gentelella
ngx-admin
ant-design-pro
6. 测试一般前端测试分以下几种：
单元测试：模块单元、函数单元、组件单元等的单元块的测试
集成测试：接口依赖（ajax）、I/O 依赖、环境依赖（localStorage、IndexedDB）等的上下文的集成测试
样式测试：对样式的测试
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许可证）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98274.html
摘要：如何构建大型的前端项目搭建好项目的脚手架一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。组件化一般分为项目内的组件化和项目外的组件化。 如何构建大型的前端项目 1. 搭建好项目的脚手架 一般新开发一个项目时，我们会首先搭建好一个脚手架，然后才会开始写代码。一般脚手架都应当有以下的几个功能： 自动化构建代码，比如打包、压缩、上传等功能 本地开发与调试，并有热替换与...
摘要：首先我们得有一个主心库，这个库十分重要，里面没有业务逻辑的代码，主要是平时开发时所需要的所有脚本，以及的一些基本依赖。创建衍生库因为我们所有项目围绕主心库而衍生出来的，所以衍生库和主心库的关心和关系一致。 如何工程化开发大型angular2项目（上篇） 前请提要 目前前端项目越来越复杂，管理一个前端项目需要考虑的方面越来越多，例如工具选择、项目构建、代码自动review工具、代码打包上...
摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...
摘要：所以前端工程师不仅仅是写好页面和做好兼容性。对前端工程师的技术能力也会带来考验。这里想要说的是，如果使用了，使用了服务端渲染，对于前端工程师的个人素质要求会比较高，因为需要处理很多服务端的问题。 背景 我们团队有个项目由于开发时间较长，且是前后端杂糅的开发方式，维护成本很高，在线上暴露的问题很多。而且因为对接了公司一百多条产品线，每天都会接到大量的客诉和产品线反馈的问题。2017年11...
摘要：作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本，的简称。的包管理工具，用于同一管理我们前端项目中需要用到的包插件工具命令等，便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通...
阅读 541·2023-04-26 01:42
阅读 3203·2021-11-22 11:56
阅读 2371·2021-10-08 10:04
阅读 773·2021-09-24 10:37
阅读 3062·2019-08-30 15:52
阅读 1708·2019-08-29 13:44
阅读 440·2019-08-28 17:51
阅读 2097·2019-08-26 18:26
