Babel

Babel是什么

Babel在现代前端开发中起着基石的作用，负责将高级js语法转换成浏览器支持的语法。

Babel由什么组成

@babel/core： babel核心代码
@babel/cli：babel的命令行工具
@babel/pollyfill：针对浏览器的补丁
plugin：babel通过插件完成实际的转换工作，不同插件完成不同格式的转换
preset: 预置的插件集合，方便用户使用
config file：babel基于用户定制的配置文件完成转换

配置的几种方式

babel有两种级别的配置文件：
项目级： 'babel.config.json'，针对整个项目进行配置
文件级：‘,babelrc.json’, 可单独针对文件进行配置

1. babel.config.json
   放在根目录下（package.json同级目录），管理整个项目配置

{
  "presets": [],
  "plugins": []
}

2. .babelrc.json
   可放在根目录或子目录下，对单独的目录进行定制

{
  "presets": [...],
  "plugins": [...]
}

3. bable.config.js
   该种方式可以在js中添加Nodejs的代码，更加方便的定制配置

module.exports = {
  "presets": [],
  "plugins": []
}

如：针对不用环境进行配置

const presets = [ ... ];
const plugins = [ ... ];

if (process.env["ENV"] === "prod") {
  plugins.push(...);
}

module.exports = { presets, plugins };

或调用api

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

4. package.json

{
   "name": “my project”，
   "babel"L {
       "presets": [...],
       "plugins": [...]
    }
}

注：babel支持的文件类型有.json, .js, .cjs, .mjs