babel 入门使用 (babel 7.4.0)

官网

安装

// babel 核心
yarn add @babel/core

// babel 预设插件
yarn add @babel/preset-env

// babel 命令行
yarn add @babel/cli

// babel 垫片（非必须，提供Promise， async await等）

使用例子

• 根目录创建配置文件 babel.config.js

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" ]
    }
    

  • 以插件路径代替插件名

    {
        "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类型

常用cli 命令行

• --out-file / -d 输出目录
• -- watch / -w 文件监听
• --source-maps 使用源码映射
• --ignore 忽略规范及测试文件
• --copy-files 拷贝非编译文件

其他命令可以查看babel-cli源码