官网
安装
// 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", ] }; } -
常用预设
常用cli 命令行
- --out-file / -d 输出目录
- -- watch / -w 文件监听
- --source-maps 使用源码映射
- --ignore 忽略规范及测试文件
- --copy-files 拷贝非编译文件
其他命令可以查看babel-cli源码
