前端架构之路-组件化

谁践踏了优雅 2022-05-21 01:20 252阅读 0赞

# 组件化 #

## 1. 什么是 “组件化” ##

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

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

## 2. 项目内组件化 ##

项目内的组件化，就是一个项目中可以共用的代码提取出来，独立成组件，供项目其他地方调用。比如像上一节推荐使用的目录结构中的 `component` 目录：

项目内的组件化对于单个项目是很适用，但当组件需要被跨项目使用（多个项目同时使用）时，便有些棘手了。

## 3. 彻底组件化 ##

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

比较常用的版本管理工具有 [git][]、[svn][]。

版本管理系统以 [gitlab][] 为例进行说明。

### 3.1 目录结构示例 ###

### 3.2 使用组件 ###

在 `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';

一般来说，独立化组件要有 [私有包命名前缀][Link 1]。

# 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] 将会讲到。

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

## 4. 使用构建工具 ##

团队开发组件化之后，就会有大量的组件产生。与诸多项目一样，如何既能快速开发，又有规范可循，维护成本最小化，当然还是得用构建工具呀。

以 [yume][] 构建工具为例进行说明。

### 4.1 安装工具 ###

npm install yume -g

### 4.2 新建项目 ###

yume new yume-demo && cd yume-demo && npm install yume --save-dev

### 4.3 根据需要更新配置文件 ###

配置文件在项目根目录下 `yume.config.js` 中。

module.exports = { 
        // 模块定义
     modules: { 
     index: { 
     js: 'src/index.js',
     filename: 'demo',
     library: 'Demo',
     libraryTarget: "umd"
            },
     ui: { 
     html: 'ui/index.html',
     js: 'ui/index.js'
            },
     demo: { 
     html: 'demo/index.html',
     js: 'demo/index.js'
            },
     example: { 
     html: 'example/index.html',
     js: 'example/index.js'
            }
        },
        // 外部依赖包（不需要被打包进 dist 文件中）
     externals: { 
     jquery: { 
     commonjs: 'jquery',
     amd: 'jquery',
     commonjs2: 'jquery',
     root: 'jQuery'
            },
            ...
        },
        // 单独打包 css
     packCssSeparately: true,
        ...
    };

### 4.4 开发项目 ###

yume dev moduleName

### 4.5 打包项目 ###

yume dist moduleName

这个时候，会在 `dist` 目录中生成相应的包文件，然后运行 `npm publish` 就可以发布到远程仓库中了。

## 5. 动态开发组件 ##

组件开发中有一个比较突出的问题，就是很多组件往往是与实际项目有强依赖性，需要与实际项目进行实时调试，而实际项目又是以版本化在管理组件，不能做到实时更新组件代码，组件必须发布一个版本，实际项目才能更新，这极大的降低了开发效率和便利性。

解决这个问题当然还是需要构建工具的支持。以 [lila][] 与 [yume][] 为例进行说明：

#### 目录结构是这样的 ####

#### 在 `project1` 中代码是这样的 ####

# package.json { "dependencies": { "@yourCompany/component1": "^0.0.1" } } # code require('@yourCompany/component1/dist/component1.css'); // css 文件 const component1 = require('@yourCompany/component1'); // 主文件

#### 配置 `lila.config.js`，让项目支持动态加载 `@yourCompany/component1` 的开发代码 ####

module.exports = {
        ...,
        // 添加一个 `resolve.modules`（添加一个 webpack 加载包基地址）
        resolveModules: [
            '../'
        ],
        // 别名配置（只有当命令行中有 `-o|out` 参数时才生效）
        outResolveAlias: {
            '@yourCompany/component1/dist/component1.css': 'component1/dist/component1.css',
            '@yourCompany/component1': 'component1/dist/component1.js'
        }
    }

#### dev, dist `@yourCompany/component1` 组件的本地开发代码 ####

运行 `dev, dist, sync` 命令时加上 `-o, --out` 参数，就可以加载 `@yourCompany/component1` 组件的本地开发代码

# dev
    $ lila dev moduleName -o
    
    # 正常运行，加载 0.0.1 版本中的代码
    $ lila dev moduleName
    
    # dist
    $ lila dist moduleName -e 1 -out
    
    # sync
    $ lila sync moduleName -e 2 --out

[git]: https://git-scm.com/
[svn]: http://subversion.apache.org/
[gitlab]: https://gitlab.com/
[Link 1]: https://docs.npmjs.com/misc/scope
[npm]: https://github.com/senntyou/blogs/blob/master/architecture/7.md
[yume]: https://github.com/senntyou/yume
[lila]: https://github.com/senntyou/lila