ElementUI的构建流程

ElementUI的构建流程: https://juejin.cn/post/6844903680357957645

package.json中属性介绍

分类

必备属性(name、version)

描述信息(description、keywords、homepage、repository、bugs)

NPM脚本(scripts)

依赖(dependencies、devDependencies、peerDependencies)

协议(license) 指定软件的开源协议类型

目录文件相关(main、files、typings、faas、unpkg、style)

main

main 属性指定程序的主入口文件,当在应用程序中导入此软件包时,应用程序会在该位置搜索模块的导出
在代码中引入整个 Element import ElementUI from 'element-ui';，
实际上引入的就是 lib/element-ui.common.js 中暴露出去的模块。

{
  "main": "lib/element-ui.common.js"
}

files

files 属性用于描述 npm publish后推送到 npm 服务器的文件列表如果指定文件夹，则文件夹内的所有内容都会包含进来。
也可以通过配置 .npmignore 文件来忽略文件上传。

{
  "files": [
    "lib",
    "src",
    "packages",
    "types"
  ],
}

typings

typings 属性指定针对typescript的声明文件入口

{
 "typings": "types/index.d.ts",
}

style

style属性指定了样式入口文件。

{
  "style": "lib/theme-chalk/index.css"
}

unpkg

unpkg 是一个前端常用的公共 CDN，它通过 URL 语法可以访问NPM上任何包的任何文件。

unpkg.com/:package@:version/:file

当把包发布到 npm 上时， 不仅可以 NodeJs 环境使用，也可以通过 unpkg 获取在浏览器环境执行，不过需要符合 umd 规范。

{
    "unpkg": "lib/index.js"
}

main 属性值lib/element-ui.common.js是 commonjs 规范，由build/webpack.common.js打包生成。
unpkg属性值 lib/index.js是 umd 规范，由build/webpack.conf.js打包生成

设置 unpkg 属性后，访问 unpkg.com/element-ui，按照上述规则自动访问 https://unpkg.com/element-ui@2.15.1/lib/index.js。
在之前的me-vue-ui包发布中，由于没有配置 unpkg 属性，访问 unpkg.com/me-vue-ui 时按照 main
属性定义的文件路径自动访问 https://unpkg.com/me-vue-ui@0.1.2/lib/me-vue-ui.common.js。

CDN引入
若浏览器环境引入组件,只需要通过 unpkg.com/element-ui 获取到资源,
在页面上引入 js 和 css 文件即可开始使用。 CSS文件的路径是 style 属性值；
js文件的路径是基于umd规范的打包文件的路径--unpkg属性值

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

npm run build:file

    "build:file": "
                       node build/bin/iconInit.js &
                       node build/bin/build-entry.js & 
                       node build/bin/i18n.js & 
                       node build/bin/version.js",

该命令主要用于文件的自动化生成，其多个任务是 并行执行。

• 执行 build/bin/iconInit.js 生成 examples/icon.json 图标集合文件。
• 执行 build/bin/build-entry.js 生成 src/index.js 组件库入口文件。
• 执行 build/bin/i18n.js 生成官网的多语言网站文件。
• 执行 build/bin/version.js 生成 examples/version.json 记录项目版本信息，用于网站版头部导航版本切换。

// iconInit.js
'use strict';

var postcss = require('postcss');
var fs = require('fs');
var path = require('path');
var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/styles/src/icon.scss'), 'utf8');
/**
 * parser过程：将css字符串解析成可供我们操作的JavaScript对象
 * */
var nodes = postcss.parse(fontFile).nodes;
var classList = [];

nodes.forEach((node) => {
  var selector = node.selector || '';
  var reg = new RegExp(/\.el-icon-([^:]+):before/);
  var arr = selector.match(reg);

  if (arr && arr[1]) {
    classList.push(arr[1]);
  }
});
classList.reverse(); // 希望按 css 文件顺序倒序排列

fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {});

npm run build:theme

    "build:theme": "node build/bin/gen-cssfile &&
                             gulp build --gulpfile packages/theme-chalk/gulpfile.js && 
                             cp-cli packages/theme-chalk/lib lib/theme-chalk",

该命令主要用于项目的主题和样式生成。
1.执行 build/bin/gen-cssfile 执行 build/bin/gen-cssfile 生成 packages/theme-chalk/index.scss 样式总入口文件。
2.采用 gulp 进行样式构建，将packages/theme-chalk/src下的 scss 文件转换成 css 文件，输出至packages/theme-chalk/src/lib目录下;将packages/theme-chalk/src/fonts下的字体文件压缩处理，输出至 packages/theme-chalk/src/lib/fonts 目录下。
3.将构建内容 packages/theme-chalk/lib 拷贝到 lib/theme-chalk 下。前面 sytle 属性配置的路径文件 lib/theme-chalk/index.css 就是这样生成的。

需要安装 cp-cli 包,用于文件和文件夹复制,无需担心跨平台问题。

npm run build:utils

该命令作用把 src 目录下除了 src/index.js 入口文件外的其他文件通过 babel 转译后，输出至 lib 文件夹下。

需要安装 cross-env 包,是一款运行跨平台设置和使用环境变量的脚本，不同平台使用唯一指令，无需担心跨平台问题。

需安装babel-cli Babel 自带了一个内置的 CLI 命令行工具

npm run build:umd

    "build:umd": "node build/bin/build-locale.js",

该命令作用是执行 build/bin/build-locale.js 通过 babel 处理 src/locale/lang 目录下的文件，生成 umd 格式的文件，输出至 lib/umd/locale 目录下。

npm run dev

    "dev": "
npm run bootstrap && 
npm run build:file && 
cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js &
node build/bin/template.js
",