babel|babel 入门使用 (babel 7.4.0) babel入门使用(babel7.4.0)

官网安装

// babel 核心 yarn add @babel/core// babel 预设插件 yarn add @babel/preset-env// babel 命令行 yarn add @babel/cli// babel 垫片（非必须，提供Promise， async await等）

使用例子

module.exports = { presets: [ "@babel/env" ], plugins: [] }

执行编译

yarn babel src -d lib // babel [需要编译的文件或目录] -d [指定输出目录] // 该命令的意思是，将src下所有的js文件编译后，输出到lib目录下，如果lib不存在，将新建该目录。

三种配置文件

package.json文件使用“babel” 字段配置babel设置

{.... "babel": {"presets": [...], "plugins": [...] }}
.babelrc 文件

{ "presets":[ ... ], "plugins":[ ... ] }
babel.config.js 文件

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

三种配置方式配置项是一致的.
推荐使用babel.config.js 具有更灵活的配置方式

plugins配置基本概念

plugins
- babel通过使用插件处理不同的编译需求，类似webpack的处理方式,
- 插件将在presets 前执行，执行顺序从前向后
plugins 配置方式, (插件需提前安装)
- 插件名
  
  { "plugins": [ "babel-plugin-myPlugin" ] }
- 以babel-plugin- 开头的插件可以使用短名
  
  { "plugins": [ "myPlugin" ] }
- 【babel|babel 入门使用 (babel 7.4.0)】以插件路径代替插件名
  
  { "plugins": [ "./node_modules/asdf/plugin" ] }
plugins 参数,

// 当配置项为数组时, 可提供参数对象 { “plugins”: [ [ // 插件名 "transform-async-to-module-method", // 插件参数 { "module": "bluebird", "method": "coroutine" } ] ] }

Presets预设配置基本概念https://www.babeljs.cn/docs/presets

presets
- 预设是官方提供的快速配置方式, 既是预先的插件设置
- presets 的执行顺序在plugins之后，多配置项下，执行顺序为由后向前。
presets配置，方式与plugins相同
- 预设名
  
  { "presets": [ "@org/babel-preset-name", ] }
- 短名
  
  { "presets": [ "@org/babel-preset-name", "@org/name" // equivalent ] }
- 模块路径
  
  "presets": ["./myProject/myPreset"]
presets 参数配置与plugins相同

{ "presets": [ ["presetA", {}] ] }
自定义预设

既是将自定义plugins配置作为模块导出到 presets 中

module.exports = function() { return { // 导出自定义插件配置 plugins: [ "pluginA", "pluginB", "pluginC", ] }; }
常用预设
- @babel/preset-env 基础配置
- @babel/preset-flow flow类型
- @babel/preset-react react类型
- @babel/typescript ts类型