该文章是为了更好的理解：element-ui 打包流程源码解析（上） 第2.5节 npm run build:utils 打包命令
"scripts": {
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
}
使用 babel 时，默认都会以根目录下的
.babelrc文件为配置项。
1，babel-cli
上面的打包命令作用是：
使用 BABEL_ENV=utils 环境下的配置项，来编译整个 src 目录下的文件并输出到 lib 目录，同时忽略src/index.js
2，babel-core
在 build/bin/build-locale.js 中，定义了一个方法，用于将 esm 模块转为 umd 模块。
var transform = function(filename, name, cb) {
require('babel-core').transformFile(resolve(localePath, filename), {
plugins: [
'add-module-exports',
['transform-es2015-modules-umd', {loose: true}]
],
moduleId: name
}, cb);
};
3，.babelrc
element-ui 的 .babelrc 文件配置。
只看下命令中关于 BABEL_ENV=utils 环境的相关配置：
{
// ...
// 只看 utils 环境下的配置
"env": {
"utils": {
"presets": [
[
"env",
{
"loose": true,
"modules": "commonjs",
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}
],
],
"plugins": [
["module-resolver", {
"root": ["element-ui"],
"alias": {
"element-ui/src": "element-ui/lib"
}
}]
]
},
// ...
}
}
3.1，presets
简单理解为是 plugins 的集合，多个时逆序执行。以上面的配置为例，
语法：添加了1个 preset：env = babel-preset-env（如果没有配置项时会运行所有的 transform）。
env配置项解释：
1，loose: true，参考
开启 loose 模式转换为 es6 –> es5，生成代码更快，老引擎兼容性好，代码简洁。
2，modules: commonjs
启用将ES6模块语法转换为另一种模块类型。 false 表示不会转换目标模块。
3，targets
作用目标，只支持目标范围内浏览器所需的 polyfill 和代码转换。
查询语句是 browserslist 支持的有效的查询格式。<– 翻译文件
- 全球使用率 > 1% 的浏览器版本。
- 每个浏览器最近的两个发行版。
- ie 大于 8 版本
3.2，plugins
"plugins": [
["module-resolver", {
"root": ["element-ui"],
"alias": {
"element-ui/src": "element-ui/lib"
}
}]
]
module-resolver 对应的是 babel-plugin-module-resolver。
作用：简化路径和指定别名。
- 简化路径：在项目中
require/import通过../../element-ui/xxx可以直接写element-ui/xxx - 指定别名：
import { once, on } from 'element-ui/src/utils/dom';
打包后变为
exports.__esModule = true;
var _dom = require('element-ui/lib/utils/dom');
其他相关
在 .babelrc 的完整配置中，还有一个 plugins: transform-vue-jsx，实现在 Vue 中使用 JSX 语法。
感兴趣可以看下：vue jsx | elementFe官方解析。
以上。
原文地址:https://blog.csdn.net/qq_40147756/article/details/135687154
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_61049.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
