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
",
网友评论