前端项目如何治理
前端项目标治理分为两个维度：项目内的治理与多项目之间的治理。
1. 项目内的治理
在一个项目内，当有多个开辟者一同合作开辟时，或许功用愈来愈多、项目愈来愈巨大时，保证项目有条有理的举行是相称主要的。
平常会从下面几点来考据一个项目是不是治理得很好：
- 可扩大性：能够很轻易、清楚的扩大一个页面、组件、模块
- 组件化：多个页面之间共用的大块代码能够自力成组件，多个页面、组件之间共用的小块代码能够自力成大众模块
- 可浏览性：浏览性优越（包含目次文件构造、代码构造），能够很快速的找到某个页面、组件的文件，也能快速的看出项目有哪些页面、组件
- 可移植性：能够轻松的对项目架构举行晋级，或移植某些页面、组件、模块到其他项目
- 可重构性：对某个页面、组件、模块举行重构时，能够保证在重构以后功用不会转变、不会发生新 bug
- 开辟友爱：开辟者在开辟某一个功用时，能够有比较好的体验（不好的体验比方：多个文件相隔很远）
- 合作性：多人合作时，很少发生代码争执、文件掩盖等题目
- 可交代性：当有人要脱离项目时，交代给其他人是很轻易的
1.1 可扩大性
关于前端项目而言，可扩大性是并不难的，由于许多时刻前端的代码、文件分块都是根据页面来的，所以自然就是一块一块的。
但这里照样要提一下，由于有些开辟者不喜欢分块，把应该分块的东西杂揉在一同，比方：
- src/
- main/ # main 目次
- css/ # css 鸠合
- alpha.css
- beta.css
- ...
- js/ # js 鸠合
- alpha.js
- beta.js
- ...
- alpha.html # alpha 页面
- beta.html # beta 页面
- ...更好的体式格局：
- src/
- main/ # 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/ # css 鸠合
- main/ # main 目次
- alpha.css
- beta.css
- ...
- js/ # js 鸠合
- main/ # main 目次
- alpha.js
- beta.js
- ...
- html/ # html 鸠合
- main/ # main 目次
- alpha.html # alpha 页面
- beta.html # beta 页面
- ...可浏览性比较好的目次文件构造：
- src/
- main/ # 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 / ava
- React 组件：enzyme + jest，别的能够运用 react-testing-library 替代
react-dom/test-utils - Vue 组件：vue-test-utils + jest / mocha / tape / ava
能够参考：
1.6 开辟友爱
这主如果从目次构造优化动手，比方：
像下面这类目次构造，假如要编辑一个页面，须要随处找页面相干的文件，编辑器上就会构成一个很长的目次树，一点不友爱：
- src/
- css/ # css 鸠合
- main/ # main 目次
- alpha.css
- beta.css
- ... # 中心有 30 个页面
- js/ # js 鸠合
- main/ # main 目次
- alpha.js
- beta.js
- ... # 中心有 30 个页面
- html/ # html 鸠合
- main/ # main 目次
- alpha.html # alpha 页面
- beta.html # beta 页面
- ... # 中心有 30 个页面而像下面这类目次构造，一切的文件都在一个目次下，找文件就很轻易，而且很清楚：
- src/
- main/ # main 目次
- alpha/ # alpha 页面
- index.css # css 进口文件
- index.js # js 进口文件
- index.html # html 进口文件
- ...
- beta/ # beta 页面
- index.css
- index.js
- index.html
- ...
- ...1.7 合作性
当项目变大、多人合作时，我们就须要治理好哪些是正在开辟的代码、哪些是提交测试的代码、哪些是已上线的代码、如何防止代码争执与线上新代码被旧代码掩盖等等。
详细能够参考：web 项目如何举行 git 多人合作开辟。
1.8 可交代性
当有人要脱离项目时，就须要把他担任的代码交代给他人，但如何才能使交代是轻松愉快的？
那就是文档，包含解释文档、接口文档等。想一想，假如没有文档，该如何交代呢？
能够参考：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"
}
}
import component1 from 'component1';
import component2 from 'component2';经常使用组件有：
-
@yourCompany/utils: 东西类 -
@yourCompany/shortcut.css: 快速 css 类 -
@yourCompany/data: 经常使用静态数据 - …
组件化平常会与私有 npm 堆栈一同运用。
能够参考：
2.2 版本化
假如运用项目运用 npm 来治理依靠，就是版本化治理了。
组件项目更不用说了，值得提一下的是组件项目标版本号应该相符 semver 语义化版本范例。
版本花样：主版本号.次版本号.订正号，版本号递增划定规矩以下：
- 主版本号：当你做了不兼容的 API 修改，
- 次版本号：当你做了向下兼容的功用性新增，
- 订正号：当你做了向下兼容的题目修改。
先行版本号及版本编译元数据能够加到“主版本号.次版本号.订正号”的背面，作为延长。
能够参考：
2.3 一致性
多个项目之间应该运用雷同的手艺选型、UI 框架、脚手架、开辟东西、构建东西、测试库、目次范例、代码范例等，雷同功用应指定运用牢固某一个库。
如许做的目标是削减项目之间的环境差别，有利于项目之间的代码移植，也更有利于组件化、代码重用。
能够参考：
2.4 文档化
完美的文档，不管是对组件项目照样运用项目，都是很主要的。
组件项目须要用文档通知开辟者组件怎样用、有哪些接口；运用项目须要用文档来做小组交换、项目交代等。
后续
更多博客，检察 https://github.com/senntyou/blogs
版权声明：自在转载-非商用-非衍生-坚持签名（创意同享3.0许可证）
