php的前端组件化,前端架构之路（6） - 组件化

组件化

1. 什么是 “组件化”

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

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

2. 项目内组件化

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

|-- project/ 工程目录

|-- src/ 源代码目录

|-- component/ 全局组件目录

|-- util/ 全局工具函数目录

|-- ...

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

3. 彻底组件化

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

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

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

3.1 目录结构示例

|-- 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/ 源代码目录

|-- ...

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

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

# 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 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 为例进行说明：

目录结构是这样的

|-- projects/

|-- project1/ 项目1

|-- project2/ 项目2

|-- component1/ 组件1

|-- component2/ 组件2

在 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

6. 后续

版权声明：自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)