如何搭建一个大型的前端项目1.搭建项目的脚手架一般在开发一个新项目的时候，我们会先搭建一个脚手架，然后开始写代码。一般来说，脚手架应该具备以下功能：代码自动构建，如打包、压缩、上传等功能，本地开发调试，热替换热加载等功能，本地接口数据模拟，css模块化检查和自动修正ofinconsistencies规范代码，优化代码格式社区有很多模板（boilerplate）或者工具可以帮助我们搭建现成的脚手架，比如：create-react-appvue-cliyeomanhtml5-boilerplatereact-boilerplatehackathon-starter当然，如果这些模板或者工具都不能满足你的需求，你也可以搭建自己的脚手架。可以参考：如何搭建自己的前端脚手架提高代码质量CSS模块化CSS弱化和js加强本地化接口模拟，前后端并行开发2.定义好项目目录结构对于大目录，一个好的目录结构是非常必要的。一个好的目录结构应该具备以下特点：解耦：代码尽量解耦，使代码逻辑清晰，便于扩展阻塞：将代码按功能分块分组，快速addblocksandgroupsEditorfriendly：当你需要更新功能时，可以快速定位到相关文件，而且这些文件应该很接近，这样你就不用到处找文件了。可以参考目录结构优化3.做好项目的组件化工作。这里的组件化，不是在框架层面，而是在工程层面。当一个项目中的不同块需要共享同一段代码，或者不同项目需要共享同一个组件时，就需要组件化。组件化一般分为项目内组件化和项目外组件化。项目内的组件化意味着可以将同一项目中不同块共享的代码提取为单个组件。项目外的组件化意味着跨项目共享的代码可以被提取到一个单独的项目中，然后像普通的npm包一样使用。可以参考：组件化的私有npm仓库4.封装团队的构建工具对于多项目，无论使用webpack还是rollup打包项目，都会面临一些问题：不同的项目配置文件不同，更新配置需要处处要改，很难保持一致性如果项目有升级，不同的block可能会有不同的配置。这时候，将配置文件打包成一个项目，然后进行版本化管理，就会非常方便。它可以像普通的npm包一样使用。.例如，我的项目都是使用lila构建的。5、选择基本的js框架、ui框架、页面模板。在开始开发之前，需要选择基本的js框架，比如react、vue、angular、jquery等，因为一旦选择好了，后面基本上是无法更换的，因为更换的成本太大了。选好基本的js框架后，再选择更好的ui框架，这样可以节省很多代码，可以参考最流行的前端UI框架。如果页面的定制化程度不高，可以选择比较好的页面模板，比如：AdminLTEvue-element-admingentellangx-adminant-design-pro6。测试一般前端测试分为以下几类：单元测试：模块单元、功能单元、组件单元等单元块的测试集成测试：接口依赖（ajax）、I/O依赖、环境等上下文的集成测试dependencies(localStorage,IndexedDB)等。Styletesting：样式的测试E2E测试：端到端的测试，也就是说在实际生产环境中测试整个应用一般会使用以下工具：jestenzymecypressseleniumppuppeteer另外，可以参考前端开发的测试。7.持续集成构建和测试一般大型项目的构建和测试会耗费很长时间，本地做这些事情不太现实，需要持续集成构建和测试。使用更多的持续集成工具：jenkinsgitlabcijenkins是一个通用工具，可以与github、bitbucket、gitlab等代码托管服务结合使用。优点是功能强大，插件多，社区活跃，缺点是配置复杂，使用难度较高。gitlabci是gitlab内置的持续集成功能。优点是使用简单，配置简单，缺点是没有jenkins强大，只能绑定gitlab才能使用。另外，如果是开源项目，travisci是个不错的选择。更多后续博客，查看https://github.com/senntyou/blogs作者：沈玉之(@senntyou)版权声明：免费转载-非商业-非衍生-保留署名（CreativeCommons3.0许可）
