We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
build --> 相关的构建脚本 examples --> 用于展示组件demo的官网 lib --> 存放打包后的文件 packages --> 各个组件的源码 src --> 引入组件的入口文件以及常用的工具类等 test --> 测试代码 types --> ts的申明文件 components.json --> 组件列表 Makefile --> 构建文件
由一系列规则(rules)构成,每条规则形如:
<target> : <prerequisites>
[tab] <commands>
target 是必需的,不可省略;prerequisites 和 commands 都是可选的,但是两者之中必须至少存在一个。
每条规则就明确两件事:构建目标的前置条件是什么,以及如何构建。
运行构建命令 make <target>
注意: 不是跨平台的,在类 UNIX 系统上可以直接运行,在 windows 上需要提前安装所需的环境。
main --> 指定一个 package 的入口文件
在项目中,用户通常通过 ES6 语法或者是 CommonJS 来引入一个package。
import 'elementUI' from 'element-ui' // ES6
const elementUI = require('element-ui') // CommonJS
那么这两段代码引入的都是 main 字段指定入口文件所导出的内容。
files --> 发布 package 时,指定具体哪些文件会发布上去
typings --> 指定 typescript 主声明文件
scripts --> npm 命令
unpkg --> 让 npm 上所有的文件都开启 cdn 服务
正常引用时
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
使用省略的 url 引用时
<script src="https://unpkg.com/element-ui"></script>
a. 如果 package.json 中指定 unpkg 字段,则相当于
<script src="https://unpkg.com/element-ui/unpkg"></script>
b. 如果 package.json 中未指定 unpkg 字段,则相当于
<script src="https://unpkg.com/element-ui/main"></script>
style --> 指定样式文件的入口
开发模式与构建入口文件
dev = bootstrap => build:file => webpack-dev-server + node build/bin/template.js
注意:& 代表并行执行, && 代表继发执行
bootstrap --> 安装依赖
build:file = node build/bin/iconInit.js + node build/bin/build-entry.js + node build/bin/i18n.js + node build/bin/version.js
2.1 node build/bin/iconInit.js --> 解析icon.scss,将所有小图标name存入examples/icon.json 2.2 node build/bin/build-entry.js --> 根据components.json,生成入口文件 2.3 node build/bin/i18n.js --> 根据examples/i18n/page.json和模板,生成不同语言的demo 2.4 node build/bin/version.js --> 生成examples/versions.json,键值对,各个大版本号对应的最新版本
webpack-dev-server --config build/webpack.demo.js
node build/bin/template.js --> 对examples/pages/template下的模板进行观测,监听变化后重新执行 node build/bin/i18n.js
新建组件
make new test
新建一个 test 组件
打包
在 make new test 新建一个组件和 npm run dev 在本地调试好以后,需要对代码进行打包,才能发布到 npm 上
dist = clean => build:file => lint => webpack => build:utils => build:umd => build:theme
clean 使用跨平台的第三方包来清除指定目录文件(之前打包生成的文件和文件夹)
build:file 根据 components.json 生成打包的入口文件,以及i18n相关语言文件等
lint 使用 ESLint 对指定目录进行代码检查
webpack 打包
4.1 webpack --config build/webpack.conf.js
生成 umd 格式的js文件
4.2 webpack --config build/webpack.common.js
生成 CommonJS 规范的js文件,使用 `require` 的时候默认加载的是这个文件
4.3 webpack --config build/webpack.component.js
以 components.json 为打包入口,将每一个组件单独打包生成一个文件,用于按需引入
build:utils 将 src 目录下的 .js 文件(除了之前生成的入口文件,都是工具方法),通过 babel 编译后,生成到 lib 目录下
build:theme = node build/bin/gen-cssfile => gulp build --gulpfile packages/theme-chalk/gulpfile.js => cp-cli packages/theme-chalk/lib lib/theme-chalk
6.1 node build/bin/gen-cssfile 通过遍历 components.json 在 packages/theme-chalk/src/ 下生成一个样式入口文件 index.scss
6.2 gulp build --gulpfile packages/theme-chalk/gulpfile.js
6.2.1 使用 gulp 执行 compile 任务,将 packages/theme-chalk/src/ 下所有 .scss 通过 scss 编译成 .css 文件,再加上浏览器前缀并压缩后,生成到 packages/theme-chalk/lib/ 目录下 6.2.2 使用 gulp 执行 copyfont 任务,将 packages/theme-chalk/src/fonts/ 目录下所有文件进行 css压缩 后,生成到 packages/theme-chalk/lib/fonts/ 目录下
6.3 将 packages/theme-chalk/lib 目录下所有文件 copy 到 lib/theme-chalk 目录下
发布
pub = bootstrap => sh build/git-release.sh => sh build/release.sh => node build/bin/gen-indices.js => sh build/deploy-faas.sh
bootstrap 安装依赖
sh build/git-release.sh 运行shell脚本进行git冲突检测
sh build/release.sh 运行shell脚本进行发布
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Element UI 的构建流程分析
目录结构
Makefile 文件
由一系列规则(rules)构成,每条规则形如:
<target> : <prerequisites>
[tab] <commands>
target 是必需的,不可省略;prerequisites 和 commands 都是可选的,但是两者之中必须至少存在一个。
每条规则就明确两件事:构建目标的前置条件是什么,以及如何构建。
运行构建命令 make <target>
注意: 不是跨平台的,在类 UNIX 系统上可以直接运行,在 windows 上需要提前安装所需的环境。
package.json 文件
main --> 指定一个 package 的入口文件
在项目中,用户通常通过 ES6 语法或者是 CommonJS 来引入一个package。
import 'elementUI' from 'element-ui' // ES6
const elementUI = require('element-ui') // CommonJS
那么这两段代码引入的都是 main 字段指定入口文件所导出的内容。
files --> 发布 package 时,指定具体哪些文件会发布上去
typings --> 指定 typescript 主声明文件
scripts --> npm 命令
unpkg --> 让 npm 上所有的文件都开启 cdn 服务
正常引用时
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
使用省略的 url 引用时
<script src="https://unpkg.com/element-ui"></script>
a. 如果 package.json 中指定 unpkg 字段,则相当于
<script src="https://unpkg.com/element-ui/unpkg"></script>
b. 如果 package.json 中未指定 unpkg 字段,则相当于
<script src="https://unpkg.com/element-ui/main"></script>
style --> 指定样式文件的入口
构建命令
开发模式与构建入口文件
dev = bootstrap => build:file => webpack-dev-server + node build/bin/template.js
注意:& 代表并行执行, && 代表继发执行
bootstrap --> 安装依赖
build:file = node build/bin/iconInit.js + node build/bin/build-entry.js + node build/bin/i18n.js + node build/bin/version.js
webpack-dev-server --config build/webpack.demo.js
node build/bin/template.js --> 对examples/pages/template下的模板进行观测,监听变化后重新执行 node build/bin/i18n.js
新建组件
make new test
新建一个 test 组件
打包
在 make new test 新建一个组件和 npm run dev 在本地调试好以后,需要对代码进行打包,才能发布到 npm 上
dist = clean => build:file => lint => webpack => build:utils => build:umd => build:theme
clean 使用跨平台的第三方包来清除指定目录文件(之前打包生成的文件和文件夹)
build:file 根据 components.json 生成打包的入口文件,以及i18n相关语言文件等
lint 使用 ESLint 对指定目录进行代码检查
webpack 打包
4.1 webpack --config build/webpack.conf.js
4.2 webpack --config build/webpack.common.js
4.3 webpack --config build/webpack.component.js
build:utils 将 src 目录下的 .js 文件(除了之前生成的入口文件,都是工具方法),通过 babel 编译后,生成到 lib 目录下
build:theme = node build/bin/gen-cssfile => gulp build --gulpfile packages/theme-chalk/gulpfile.js => cp-cli packages/theme-chalk/lib lib/theme-chalk
6.1 node build/bin/gen-cssfile 通过遍历 components.json 在 packages/theme-chalk/src/ 下生成一个样式入口文件 index.scss
6.2 gulp build --gulpfile packages/theme-chalk/gulpfile.js
6.3 将 packages/theme-chalk/lib 目录下所有文件 copy 到 lib/theme-chalk 目录下
发布
pub = bootstrap => sh build/git-release.sh => sh build/release.sh => node build/bin/gen-indices.js => sh build/deploy-faas.sh
bootstrap 安装依赖
sh build/git-release.sh 运行shell脚本进行git冲突检测
sh build/release.sh 运行shell脚本进行发布
The text was updated successfully, but these errors were encountered: