官网
安装
代码语言：javascript复制// 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源码
