1、下一代 JavaScript 语法的编译器
- 使用理念:
通过组合,实现所有功能
工作流
解析
转换
生成
常用的组合项
babel-loader
:装载源码,如果没有其它配置,则原样输出babel-core
:用于解析和转换的核心库,babel-loader的依赖项:包括transformation,file,tools,helpers等babel-external-helpers
:默认情况下,某些转换需要其他函数的支持,此时,其它函数放在使用的前面。会造成,该函数会出现很多。babel-external-helpers就是为了把这些其它函数,提取出来,然后采用引用。相当于对helpers库的优化。preset
:预设,即官方提供的一些组合项的套餐。主要是针对语法方面的。如babel-preset-env
- 除了预设的,还可以使用一些非预设的。
babel-polyfill
:垫片,添加方法在对象的原型上面。提供原生es5+环境。缺点是原型上面容易冲突babel-runtime
:babel-core转化部分的加强。此时,转化部分,有babel-runtime来把控babel-plugin-transform-runtime
:类似babel-external-helpers,配合babel-runtime使用。此时,分析用到了babel-runtime中的方法,则在顶部加入引入。我们也可以手动引入该子库。
配置
- 最好配置在
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}