编译器Babel的使用

目录

Babel的使用方式

Babel的配置

plugin的配置

plugin的参数

plugin的执行顺序 

preset的配置 

@babel/preset-env的配置

Polyfill

---

Babel的使用方式

方式一、

Babel其实是一组npm包，如果我们只需要其中的部分功能或者是需要定制一些功能时我们可以直接require对应的包，用编程的方式去使用Babel。

const babel = require("@babel/core");
babel.transform(code, options, function(err, result) {
  result; // => { code, map, ast }
});

方式二、

babel cli ，是相对比较常见的一种方式。是一个能够从终端（命令行）使用的工具，可以直接使用babel cli进行语法转换的任务，也可以使用babel node像node一样去启动一个应用，唯一的区别是babel node在加载js文件前会先按照配置对其进行语法转换。

npx babel src --out-dir lib --ignore "src/**/*.spec.js","src/**/*.test.js"

babel-node --inspect --presets @babel/preset-env -- script.js --inspect

 方式三、

结合打包工具比如webpack / rollup去使用Babel

{
    rules:[
        test: /\.m?js$/,
        exclude: /(node_modules  bower_components )/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env' ]
            }
        }
    ]
}

Babel的配置

方式一、babelrc.json

这是最常见的配置方式，放置于项目根目录的.babelrc.json是对整个项目（一个package.json可以视作一个项目）生效的全局编译配置。它不能跨项目，不适用于mono-repo架构。

方式二、babel.config.json

基于mono-repo架构的项目可以使用这种方式，它对整个工程生效（可以跨项目）

方式三、package.json的Babel字段

相当于.babelrc.json

plugin的配置

plugin的配置和preset差不多，都在对应字段的数组中加入要使用项目即可。

注意：它们的的名称是可以缩写的，如果你发现一个工程中的babel