ElementUI构建相关阅读笔记

[q837477816]

Element UI 的构建流程分析

目录结构

build --> 相关的构建脚本

examples --> 用于展示组件demo的官网

lib --> 存放打包后的文件

packages --> 各个组件的源码

src --> 引入组件的入口文件以及常用的工具类等

test --> 测试代码

types --> ts的申明文件

components.json --> 组件列表

Makefile --> 构建文件

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 服务

  1. 正常引用时

     <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  2. 使用省略的 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 --> 指定样式文件的入口

构建命令

1. 开发模式与构建入口文件

   • dev = bootstrap => build:file => webpack-dev-server + node build/bin/template.js

     注意：& 代表并行执行， && 代表继发执行

     1. bootstrap --> 安装依赖

     2. 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，键值对，各个大版本号对应的最新版本
        

     3. webpack-dev-server --config build/webpack.demo.js

     4. node build/bin/template.js --> 对examples/pages/template下的模板进行观测，监听变化后重新执行 node build/bin/i18n.js

2. 新建组件

   • make new test

     新建一个 test 组件

     • 将 组件名称 与 组件路径 添加到 components.json 文件中
     • 在 packages/test/ 下生成 index.js 文件，对外暴露一个 install 方法，支持按需要引入组件
     • 在 packages/test/src/ 下生成 main.vue 文件，即我们要新增的组件
     • 在 examples/docs/zh-CN/ 下生成一个 test.md 中文api文档
     • 在 examples/docs/en-US/ 下生成一个 test.md 英文（美式）api文档
     • 在 examples/docs/es/ 下生成一个 test.md 英文（英式）api文档
     • 在 test/unit/specs/ 下生成一个 test.spec.js 测试脚本
     • 在 packages/theme-chalk/src/ 下生成一个 test.scss 样式文件
     • 在 types/ 下生成一个 test.d.ts 的 typescript 申明文件
     • 在 examples/nav.config.json 中注册新添加的 test 组件

3. 打包

   在 make new test 新建一个组件和 npm run dev 在本地调试好以后，需要对代码进行打包，才能发布到 npm 上

   • dist = clean => build:file => lint => webpack => build:utils => build:umd => build:theme

     1. clean 使用跨平台的第三方包来清除指定目录文件（之前打包生成的文件和文件夹）

     2. build:file 根据 components.json 生成打包的入口文件，以及i18n相关语言文件等

     3. lint 使用 ESLint 对指定目录进行代码检查

     4. 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 为打包入口，将每一个组件单独打包生成一个文件，用于按需引入
        

     5. build:utils 将 src 目录下的 .js 文件（除了之前生成的入口文件，都是工具方法），通过 babel 编译后，生成到 lib 目录下

     6. 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 目录下

4. 发布

   • pub = bootstrap => sh build/git-release.sh => sh build/release.sh => node build/bin/gen-indices.js => sh build/deploy-faas.sh

     1. bootstrap 安装依赖

     2. sh build/git-release.sh 运行shell脚本进行git冲突检测

     3. sh build/release.sh 运行shell脚本进行发布