Babel 及其工作原理
一、什么是 Babel
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其它环境中。
// Babel 输入:ES2015 箭头函数 [1,2,3].map((n)=>n+1) // Babel 输出:ES5 语法实现的同等功能 [1,2,3].map(function(n){ return n+1 })
二、Babel 的工作原理
首先把原始代码转成抽象语法树(Abstract Syntax Tree,AST),然后基于这个 AST 做转换,每个转换被处理成插件的形式,最后把 AST 还原成代码。
三、安装
这里使用 Webpack
npm install --save-dev babel-loader @babel/core @babel/preset-env
安装成功后,要在 webpack.config.js 中进行简单的开启 Babel:
module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"} ] }
上面的安装只是开启了 Babel,还没选择使用 plugin,接下来是进行 plugin 的配置:
在项目根目录创建 .babelrc 文件,文件内容如下:
{ "presets": ["@babel/preset-env"] }
(这里使用 presets 而非 plugin 的原因:presets 是 plugin 的集合)
相关推荐
PANH 2020-06-07
82530995 2020-10-15
ruanhongbiao 2020-08-16
FEvivi 2020-06-16
FEvivi 2020-06-13
PANH 2020-06-12
zhongweinan 2020-06-10
PANH 2020-06-01
82530995 2020-05-10
webfullStack 2020-04-26
zhongweinan 2020-04-24
FEvivi 2020-04-15
zhongweinan 2020-03-03
zhongweinan 2020-02-21
PANH 2020-02-19
PANH 2020-01-23
zhongweinan 2020-01-21
上海彭彭 2020-01-14
yinuoqingqin 2020-01-13