如何管理前端项目前端项目的管理分为两个维度：一个项目内部的管理和多个项目之间的管理。1.项目内管理在一个项目中，当有多个开发人员一起协作开发，或者功能越来越多，项目越来越大时，保证项目的进行非常重要有条不紊地。一般通过以下几点来验证一个项目是否管理好：可扩展性：页面、组件、模块的扩展方便清晰组件化：多个页面之间共享的大块代码可以独立组成组件，多个页面和组件之间共享的小块代码可以独立形成公共模块。快速查看项目有哪些页面和组件可移植性：轻松升级项目架构，或将部分页面、组件、模块迁移到其他项目可重构性：重构页面、组件或模块重构时，可以保证功能不会重构后改变，不会产生新的bug。开发友好：开发者在开发某个功能时可以有更好的体验（不好的体验，比如：多个文件相隔较远）协作：多人协作时，很少出现代码冲突、文件覆盖等问题。交接：当有人要离开项目时，交接给他人，非常方便。1.1可扩展性对于前端项目来说，可扩展性维护性并不难，因为很多时候前端的代码和文件块都是基于页面的，自然是一块一块的。不过这里还是要提一下，因为有的开发者不喜欢分块，把应该分块的东西混在一起，比如：-src/-main/#主目录-css/#csscollection-alpha.css-beta.css-...-js/#jscollection-alpha.js-beta.js-...-alpha.html#alphapage-beta.html#betapage-...更好的方法：-src/-main/#主目录-alpha/#alpha页面-index.css#css入口文件-index.js#js入口文件-index.html#html入口文件-...-beta/#beta页面-index.css-index.js-index.html-...-...让前端项目具有高扩展性，一般从目录文件结构入手，可以参考：目录结构优化。1.2组件化这里的组件化是项目内部的组件化。我们可以将多个页面之间共享的大块代码分离成组件，将多个页面和组件之间共享的小块代码独立成公共模块。这样做的目的是提高代码的复用性，避免重新发明轮子。另外，也有利于代码之间的解耦。例如：-src/-data/#常量，静态数据目录-data1.js-data2.js-...-components/#组件目录-componnet1/-componnet2/-...-utils/#实用函数目录-util1.js-util2.js-...-...可以参考：组件化。1.3可读性这里的可读性有两个方面：目录文件结构和代码结构。1.3.1目录文件结构目录文件结构的可读性不仅与开发者有关，与项目构建者也有很大关系，因为如果构建者一开始就定义了整个项目的目录结构，它对后来的开发者是一个很好的约束。可读性差的目录文件结构：-src/-css/#csscollection-main/#主目录-alpha.css-beta.css-...-js/#jscollection-main/#主目录-alpha.js-beta.js-...-html/#htmlcollection-main/#maindirectory-alpha.html#alphapage-beta.html#betapage-...目录文件结构具有更好的可读性：-src/-main/#主目录-alpha/#alpha页面-index.css#css入口文件-index.js#js入口文件-index.html#html入口文件-...-beta/#beta页面-index.css-index.js-index.html-...-...目录文件结构的高可读性请参考：目录结构优化。1.3.2代码结构代码结构的可读性很大程度上取决于开发者的水平，但是我们可以使用工具来帮助开发者写出规范、格式良好的代码。主要有以下工具：.editorconfig：统一各开发者的编辑器配置eslint：检查js语法（包括jsx语法），最大程度修正不符合规范的代码stylelint：检查css语法（包括less，scss语法），然后最大程度的修正不符合规范的代码。Prettier：代码格式优化husky+lint-staged：强制开发者检查，自动修正和优化代码。上面的具体用法可以参考：如何提高代码质量，搭建自己的前端脚手架1.4可移植性在可能的情况下，让项目有一定的可扩展性，以后项目可以方便的升级。为了让项目能够方便地将某些页面、组件、模块迁移到其他项目中，需要尽可能对整个项目代码进行解耦和模块化。此外，还与后面会提到的“项目之间的统一性”有关。1.5可重构性重构页面和组件是很常见的，但是如何保证重构后功能不变，不会产生新的bug，则取决于测试用例。js模块：jest/mocha/tape/avaReact组件：enzyme+jest，react-testing-library可以代替react-dom/test-utilsVue组件：vue-test-utils+jest/mocha/tape/ava即可参考：React前端项目技术选型、开发工具、周边生态Vue前端项目技术选型、开发工具、周边生态1.6开发友好这主要从目录结构的优化入手，例如：喜欢下面的目录结构，如果要编辑一个页面，需要到处找页面相关的文件，在编辑器上会形成一个很长的目录树，一点都不友好：-src/-css/#csscollection-main/#主目录-alpha.css-beta.css-...#中间30页-js/#js集合-main/#主目录-alpha.js-beta.js-...#30页inthemiddle-html/#htmlcollection-main/#main目录-alpha.html#alphapage-beta.html#betapage-...#中间有30个页面，像下面的目录结构，所有文件都在一个目录下，找文件很方便，也很容易清除：-src/-main/#主目录-alpha/#alphapage-index.css#css入口文件-index.js#js入口文件-index.html#html入口文件-...-beta/#betapage-index.css-index.js-index.html-...-...1.7协作当项目变大，多人协作时，需要管理哪些代码在开发中，哪些代码提交测试，哪些代码已经上线，如何避免代码冲突和上线新代码被旧代码覆盖等等，具体可以参考：如何携带outweb项目git多人协作开发。1.8Transferability当有人要离开项目时，他需要将他负责的代码移交给其他人，但是如何让移交变得轻松愉快呢？那就是文档，包括注解文档，接口文档等等。大家想一想，如果没有文档，怎么交呢？可以参考：api接口管理工具。2.多个项目之间的管理多个项目之间，如何管理好项目之间的关系，比如共享组件、公共模块等，对于保证快速高效的开发而不需要重新造轮子，也是非常重要的。一般通过以下几点来验证多个项目是否管理好：组件化：将多个项目共享的代码分离出来，成为一个单独的组件项目版本化：组件项目和应用项目都应该进行版本管理，尤其是版本的管理组件项目应符合semver语义版本规范统一性：多个项目应使用相同的技术选型、UI框架、脚手架、开发工具、构建工具、测试库、目录规范、代码规范等，相同功能应指定使用一个固定的图书馆。文档：组件项目必须要求相关文档，应用项目在必要时也应形成相应的文档。2.1组件化这里的组件化就是项目之间的组件化。我们可以将多个项目共享的代码隔离开来，成为一个单独的组件项目。这样做的目的也是为了提高代码的复用性，避免重新发明轮子。另外，对于版本管理组件也很方便。-project1/#项目一-package.json-src/-...-project2/#项目二-package.json-src/-...-component1/#组件一-package.json-src/-dist/-...-component2/#组件二-package.json-src/-dist/-...在project1中使用component1和component2:#package.json{"dependencies":{"component1":"^0.0.1","component2":"^0.0.1"}}从'component1'导入component1;从'component2'导入component2;常用组件是：@yourCompany/utils：工具类@yourCompany/shortcut.css：快捷方式css类@yourCompany/data：通常用于静态数据...组件化通常与私有npm存储库一起使用。可以参考：组件化私有npm仓库2.2版本管理如果应用项目使用npm来管理依赖，就是版本管理。组件项目不说，值得一提的是组件项目的版本号要符合semver语义版本规范。版本格式：主版本号.次版本号.修订号，版本号递增规则如下：主版本号：当你进行不兼容的API修改时，次版本号：当你进行向后兼容的功能添加时，修订号：当您进行向后兼容性错误修复时。可以在“主版本号.次版本号.修订号”末尾添加上一个版本号和版本编译元数据作为扩展名。可以参考：从1到完美，写一个js库、node库、前端组件库从0到1再到100，搭建、编写、搭建一个前端项目2.3Unity多个项目应该使用相同的技术选型、UI框架、脚手架、开发工具、构建工具、测试库、目录规范、代码规范等，相同的功能要指定使用固定的库。这样做的目的是减少项目之间的环境差异，有利于项目之间的代码迁移，也更有利于组件化和代码复用。可以参考：react前端项目技术选型、开发工具、周边生态vue前端项目技术选型、开发工具、周边生态搭建自己的前端脚手架通用、打包、简化webpack配置2.4嗯-documented文档，无论对于组件还是项目还是应用项目都非常重要。组件项目需要使用文档来告诉开发人员如何使用组件，有哪些接口；应用项目需要使用文档进行群交流、项目交接等，更多后续博客请查看https://github.com/senntyou/blogs作者：沉宇之(@senntyou)版权声明：免费转载-非-commercial-non-derivative-keepattribution(CreativeCommons3.0license)
