element源码解析

发表于 | 分类于 ， | |

element版本：2.13.2
Vue版本：”^2.5.17”

先来看整体的目录结构

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
28
29
30
|-- Element
  |--packages   //  组件源码
  |--examples   //  官方主页源码
  |--build  //  webpack编译配置文件
  |--src    //  项目使用到的公共指令、工具集等源码存放目录
  |-- test // 单元测试相关
  |-- types // typescript相关文件包
  |-- lib // 打包后的文件目录

  |-- package.json
  |-- components.json // 组件列表（所有组件）文件
  |-- README.md // 项目说明文件

  |-- .babelrc // babel配置文件
  |-- .eslintignore // eslint校验忽略文件
​  |-- .eslintrc // eslint配置文件
​  |-- .gitattributes // git属性配置文件
​  |-- .gitignore // git忽略追踪管理的文件
​  |-- .travis.yml // 持续集成配置文件
​  
  |-- FAQ.md // 常见问题说明文档
  |-- Makefile // 自动化编译配置文件
  |-- postcss.config.js // postcss配置文件
​  
  |-- CHANGELOG.en-US.md // 版本改变点log文件-英文版
​  |-- CHANGELOG.es.md
  |-- CHANGELOG.zh-CN.md // 版本改变点log文件-中文版
​  |-- element_logo.svg // logo svg文件
​  |-- yarn.lock  // yarn配置文件
  |-- LICENSE // 开源协议

工程化架构

ele的工程化是如何做的呢？
我们先来看package.json的命令有哪些

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
"scripts": {
    "bootstrap": "yarn || npm i",
    "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
    "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
    "build:umd": "node build/bin/build-locale.js",
    "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
    "deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
    "deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",
    "dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js",
    "dev": "npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
    "dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
    "dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
    "i18n": "node build/bin/i18n.js",
    "lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
    "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js && sh build/deploy-faas.sh",
    "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
}

关于 & 与 && 区别

说明：&和&&都是逻辑运算符，都是判断两边同时真则为真，否则为假；
但是&&当第一个条件不成之后，后面的条件都不执行了，而&则还是继续执行，直到整个条件语句执行完为止

npm run bootstrap

下载依赖

npm run build:file

生成目标文件

1
2
3
4
node build/bin/iconInit.js &    //  解析theme-chalk/src/icon.scss文件 生成 icon
node build/bin/build-entry.js & //  根据components.json，生成入口文件
node build/bin/i18n.js &    //  根据examples/i18n/page.json和模板，生成不同语言的demo
node build/bin/version.js   //  生成版本信息

主要包含以上四个命令

npm run build:theme

构建主题相关

1
2
3
node build/bin/gen-cssfile &&   //  生成各个组件的汇总样式css文件
gulp build --gulpfile packages/theme-chalk/gulpfile.js &&
cp-cli packages/theme-chalk/lib lib/theme-chalk   //  将packages/theme-chalk/lib拷贝到lib/theme-chalk

npm run build:utils

设置环境变量 process.env.BABEL_ENV的值为utils，同时用babel命令编译整个src文件夹，并且将结果输出到lib文件夹下，lib不会去覆盖原来lib下的内容，编译时忽略’src/index.js’文件。

1
cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js

npm run build:umd

这个是把组件中所有的多语言都转换成当下环境的语言，
可以去 src/locale/lang 中查看所有文件，
主要是日期选择器里面的本地化和一些组件的默认加载状态的文字。

1
node build/bin/build-locale.js

npm run clean

清楚文件
rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage

npm run deploy:build

1
2
3
npm run build:file && 
cross-env NODE_ENV=production webpack --config build/webpack.demo.js && 
echo element.eleme.io>>examples/element-ui/CNAME

npm run deploy:extension

cross-env NODE_ENV=production webpack --config build/webpack.extension.js

npm run dev:extension

1
2
rimraf examples/extension/dist && 
cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js

npm run dev

1
2
3
npm run build:file &&
cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js &
node build/bin/template.js

npm run dev:play

与 dev 相比少了安装的步骤，以及后面的 template.js的构建，多了个 PLAY_ENV=true

1
2
npm run build:file &&
cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js

npm run dist

1
2
3
4
5
6
7
8
9
npm run clean &&    //先清理环境
npm run build:file && //构建文件
npm run lint &&  // 代码检查
webpack --config build/webpack.conf.js &&   
webpack --config build/webpack.common.js &&
webpack --config build/webpack.component.js &&
npm run build:utils &&
npm run build:umd &&    //  构建多语言
npm run build:theme

打包生成最终的代码，这应该是最全的了

npm run i18n

国际化
node build/bin/i18n.js

npm run lint

代码检查
eslint src/**/* test/**/* packages/**/* build/**/* --quiet

生成新组件

node build/bin/new.js <new-component>