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源码