目录
- 1,babel-cli
- 2,babel-core
- 3,.babelrc
- 3.1,presets
- 3.2,plugins
- 其他相关
该文章是为了更好的理解: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
选项参考,plugins 和 presets 区别
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官方解析。
以上。