Babel
Babel
的转译过程分为三个阶段: parsing
, transforming
, generating
。babel
只是转译新标准引入的语法,比如ES6的箭头函数转译成ES5的函数;而新标准引入的原生对象,部分原生对象新增的原型方法,新增API等(如Proxy
, Set
等),这些babel
是不会转译的,需要用户自行引用polyfill
来解决。
Babel
转译过程:
解析parsing
:将代码字符串解析成抽象语法树
变换transforming
:对抽象语法树进行转换操作
生成generating
:根据变换后的抽象语法树再生成代码字符串
plugins
插件应用于babel
的转译过程,尤其是第二阶段transforming
,如果这个阶段不使用任何插件的话,babel
会原样输出代码。我们主要关注第二阶段使用的插件,因为tranform
插件会自动使用对应的词法插件,所以parsing
阶段的插件不需要配置
presets预设
为了减少配置转译过程中使用的各类插件的麻烦,babel
官方做了一些预设的插件集。JS
标准为例,babel
提供了如下的一些preset
:es2015
, es2016
, es2017
, env
es20xx
的preset
只转译该年份批准的标准,而env
则代指最新的标准,包括lastest
和es20xx
。
另外,stage-0
到stage-4
的标准成型之前的各个阶段,实验版的presets
stage-0
: 稻草人,只是一个想法,可能是babel插件stage-1
: 提案,初步尝试stage-2
: 初稿,完成初步规范stage-3
: 候选,完成规范和初步的浏览器实现stage-4
: 完成,将被添加到下一年度发布
babel-loader
用来处理ES6语法,将其编译成浏览器可以执行的js语法。
module.exports = {
...
module: {
rules: [{
test: /\.jsx$/
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],//presets设置的就是当前js版本
plugins: [require('@babel/plugin-transform-object-rest-spread')]//需要的插件
}
}
}]
}
};
options属性来给loader传递选项
babel-poyfill
polyfill会把ES2015+环境整体引入代码环境中,让你的代码可以直接使用新标准所引入的新原生对象。
要确保在入口处导入polyfill
,因为polyfill
代码需要在所有代码前先被调用
module.exports = {
entry: ['babel-polyfill', './app/js']
};
babel-plugin-transform-runtime
babel-plugin-transform-runtime
插件依赖babel-runtime
, babel-plugin-transform-runtime
插件是把js
代码中使用的新原生对象和静态方法转换成对babel-runtime
包的引用。
未完待续,继续学习继续补充哦~
参考文献
【JavaScript】深入理解Babel原理及其使用