Babel

概念

Babel 作为前端绕不开的一个词，Babel是什么？

官网给出的解释是Javascript compiler JS编译器。作为一个工具链 将ES5+的语法转化为向后兼容的语法，以便支持旧版本浏览器以及其他环境。

这个其实也很好理解，因为各大浏览器的兼用性和特点不同，ES版本不断更新，支持更多的语法，为了不依附浏览器的支持，Babel 作为一个工具链，让开发者使用ES6+语法少了兼容的顾虑。

介绍

babel.config.js , babel.config.json, .babelrc, .babelrc.json 这些都是babel的配置文件，或者直接在package.json 文件中写babel的配置(后两者其实是相同的)。

根据不同的使用场景，可以选择合适的配置格式，一般建议使用babel.config.json格式。babel自身也是使用这种配置格式，.json 文件的优势在于，其余依赖babel配置的模块可以缓存，但是.js优势在于更多的配置化操作，因为可以使用函数操作各种输出。

• 配置优先级

  babel.config.json < .babelrc < programmmatic options from @babel/cli

• 合并策略

  • assumptions, parserOpts, generatorOpts 配置会被合并，而非替换
    

  • plugins 和 presets 会按照具体的每个配置进行替换，后面的会覆盖前面的配置
    

  plugin和preset中的每种实例的配置只能出现一次：plugins: ['./plug']，如果想要配置两种相同的选项，需要指定每一项的名称:

  plugin: [
      ['./plug', {  }, 'first-instance-name'], 
      ['./plug', {  }, 'second-instance-name']
  ]
  

配置

babel的配置文件可以分为两种:

1. 项目范围内的配置: babel.confg.json，可以有不同的扩展名: (js, mjs, cjs)
2. 相对文件的配置:

   • .babelrc.json，可以有不同的扩展名:(.babelrc, .js, .cjs, .mjs)
     

   • package.json 中babel 的配置
     

Babel7.x中默认有根目录的概念，就是当前的工作目录。Babel 会自动去查找当前的配置文件，或者用户可以明确的指定conFile 的值来确定配置文件。

预设 Preset

Babel 的预设可以被看作是一组插件和options 配置的集合，官方根据不同的环境提供的预设有:

• @babel/preset-env 针对ES5+语法
• @babel/preset-typescript 针对ts
• @babel/preset-react 针对react
• @babel/preset-flow 针对flow

预设的排列顺序

Preset 是逆序排列的，也就是说倒序执行

{
    "presets": ["a", "b", "c"]
}

如上的配置会按照 c、b、a

插件 Plugin

Babel 的代码转换时通过应用一系列的插件和预设来实现的 插件一般分为转换插件和语法插件，语法插件一般不用手动去指定，相应的转换插件户自动去调用

插件的顺序

• 插件在 Presets 之前运行
• 插件顺序从前往后执行

插件列表

官方有一系列的 插件列表，具体可以查看