前端架构经验谈之二

现在的开发已经不是以前的html+css+jQuery了,组件化,mvvm的概念早就流行。我们现在了解下组件化。

什么是 “组件化”

组件化就是将项目中可以共用的代码提取出来,单独成一个组件,以便在多个地方调用此组件,这样便可以做到只维护一份代码,而不需要每次更新都要改多个地方,而且还不能保证都一样。

组件化一般分为项目内的组件化和项目外的组件化。

项目内组件化

项目内的组件化,就是一个项目中可以共用的代码提取出来,独立成组件,供项目其他地方调用。这很好理解,项目内的组件化对于单个项目是很适用,但当组件需要被跨项目使用(多个项目同时使用)时,便有些棘手了。

彻底组件化

彻底组件化就是将组件独立成一个项目,如果需要在其他项目使用这个组件,就需要依赖这个项目。这个时候,组件化一般都是搭配版本管理工具和版本管理系统一起使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|-- project1/ 项目1
|-- package.json
|-- .gitignore
|-- README.md
|-- lila.config.js
|-- ...
|-- project/ 工程目录
|-- src/ 源代码目录
|-- component/ 项目内组件目录
|-- util/ 全局工具函数目录
|-- ...

|-- component1/ 组件1
|-- package.json
|-- .gitignore
|-- README.md
|-- webpack.config.js
|-- src/ 源代码目录
|-- ...

|-- component2/ 组件2
|-- package.json
|-- .gitignore
|-- README.md
|-- webpack.config.js
|-- src/ 源代码目录
|-- ...

在 project1 中安装 component1, component2 依赖。

1
2
3
4
5
6
7
8
9
10
11
12
13
# package.json
{
"dependencies": {
"component1": "git+http://yourGit.com/yourName/component1.git#0.0.1",
"component2": "git+http://yourGit.com/yourName/component2.git#0.0.1"
}
}

# code
// commonjs
const component1 = require('component1');
// es6
import component1 from 'component1';

一般来说,独立化组件要有 私有包命名前缀。

1
2
3
4
5
6
7
8
9
10
11
12
13
# package.json
{
"dependencies": {
"@yourCompany/component1": "git+http://yourGit.com/yourName/component1.git#0.0.1",
"@yourCompany/component2": "git+http://yourGit.com/yourName/component2.git#0.0.1"
}
}

# code
// commonjs
const component1 = require('@yourCompany/component1');
// es6
import component1 from '@yourCompany/component1';

独立化组件与私有 npm 仓库配合使用是最完美的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# npm
$ npm config set registry http://your.company.npm.registry.com

# package.json
{
"dependencies": {
"@yourCompany/component1": "^0.0.1",
"@yourCompany/component2": "^0.0.1"
}
}

# code
// commonjs
const component1 = require('@yourCompany/component1');
// es6
import component1 from '@yourCompany/component1';

使用构建工具&需要的特性

有了组件,自然需要构建工具的打包,现在市面上越来越多的构建工具涌现,包括grunt,gulp,webpack,parcel,rollup等,可以去印记中文了解下各种构建工具。但是真正适合自身团队业务的,必须将他们每个工具的特效进行组合,打造适合团队开发的构建工具。下面罗列下适合团队的构建工具应当具有的一些特性:

这里只涉及团队开发的特性,不涉及前端构建的基本特性,如:合并压缩代码,去缓存,提取公共文件等。

  • 有良好的项目结构(目录结构,文件结构,模块化分组结构,组件化结构),并对其具有一定的约束力;
  • 页面之间、组件之间应该是相互隔离、解耦的,更新其中的一个页面(或组件)不会影响到其他的页面(或组件);
  • 对多页面和单页面应用都有完备的支持;
  • 对扩展语言的支持(可选):TypeScript、coffeescript、less、sass、ejs、jade;
  • 对框架的支持(可选):react、vue、angular;
  • 自动化构建,以尽量少的命令做尽量多的事情;
  • 扩展性好,能够很方便的扩展工具的功能;
  • 可配置性好,可以通过配置来启用或禁用一些功能;
  • 支持多个页面一起构建,支持多服务器环境,支持 web、static 分离,支持适配任何后端语言,支持命令行配置,支持个人本地化配置(每个人自己独有的配置),支持页面本地化配置(每个页面独有的配置);
  • 文件构建记录,每次只上传服务器不存在的文件;
  • 能够快速创建新项目,并能方便的在多个项目之间共享组件;