前端架构经验谈之二
in Web with 0 comment

前端架构经验谈之二

in Web with 0 comment

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

什么是 “组件化”

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

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

项目内组件化

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

彻底组件化

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

|-- 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 依赖。

# 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';

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

# 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 仓库配合使用是最完美的。

# 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等,可以去印记中文了解下各种构建工具。但是真正适合自身团队业务的,必须将他们每个工具的特效进行组合,打造适合团队开发的构建工具。下面罗列下适合团队的构建工具应当具有的一些特性:

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

Responses