Babel编译
安装cli依赖
npm install @babel/core @babel/cli -D
- “@babel/cli”: “^7.14.8”,
- “@babel/core”: “^7.14.8”,
一、如何配置babel?
1.1 配置方式
- 使用
.babelrc
配置 - 使用
babel.config.json
配置(官网推荐方式) - 使用
cli
命令集
1.2 测试babel的三种配置
编写一个带有es6
语法的文件es.js
,内容如下:
const arr = [1,2,3,4]
arr.includes(2)
向package.json
中添加一个babel编译的script命令
"scripts": {
"babel": "babel es.js --out-file es.compiled.js",
},
这样就可以:
- 通过
npm run babel
命令对es.js进行babel编译 - 将编译结果输出到
es.compiled.js
注意:此时可以直接调用babel命令,是因为前面安装了babel的cli依赖包
@babel/core
和@babel/cli
1.2.1 无任何babel配置
我们可以先运行下看看结果,命令行执行以下命令:
npm run babel
观察生成的es.complied.js
:
const arr = [1, 2, 3, 4];
arr.includes(2);
此时,和源文件内容完全一致,因为我们并没有加任何对es6进行解析的配置,babel编译了个寂寞。。。
1.2.2 使用.babelrc
配置
现在,为了将es6的文件编译成浏览器可以直接识别的es5,我们需要安装@babel/preset-env
;
npm i -D @babel/preset-env
根目录新建文件.babelrc
, 并配置
{
"presets": [
"@babel/preset-env"
]
}
这里的配置意为使用
@babel/preset-env
插件为预置配置项进行babel
编译,
预测的明显编译结果,应该是const
变为var
配置完成后,再次运行npm run babel
,观察结果文件es.compiled.js
:
"use strict";
var arr = [1, 2, 3, 4];
arr.includes(2);
此时,编译后的文件,成功将const
转换为var
了
1.2.3 使用babel.config.json
配置(官网推荐方式)
根目录新建babel.config.json
:
{
"presets": [
"@babel/preset-env"
]
}
删除刚才的.babelrc
文件,运行npm run babel
观察结果文件es.compiled.js
:
"use strict";
var arr = [1, 2, 3, 4];
arr.includes(2);
效果和刚才完全一致!
1.2.4 使用命令集
打开终端,输入一下命令:
./node_modules/.bin/babel --presets @babel/preset-env es.js
终端输入如下:
"use strict";
var arr = [1, 2, 3, 4];
arr.includes(2);
babel --presets XXX
即为设置babel的persets配置为XXX- babel还提供了更多的命令,可以
babel --help
查看
1.2.5 babel命令一览表
命令 | 含义 |
---|---|
-f, --filename [filename] | 从标准输入读取时使用的文件名。这将用于源映射、错误等。 |
--presets [list] | 以逗号分隔的预设名称列表。 |
--plugins [list] | 以逗号分隔的插件名称列表。 |
--config-file [path] | 要使用的 .babelrc 文件的路径。 |
--env-name [name] | 加载配置和插件时使用的“env”的名称。默认为 BABEL_ENV 的值,否则为 NODE_ENV,否则为 ‘development’。 |
--root-mode [mode] | 项目根解析模式。 ‘root’(默认)、‘upward’ 或 ‘upward-optional’ 之一。 |
--source-type [脚本|模块] | |
--no-babelrc | 是否查找 .babelrc 和 .babelignore 文件。 |
--ignore [list] | 不 编译的 glob 路径列表。 |
--only [list] | 仅 编译的 glob 路径列表。 |
--no-highlight-code | 启用或禁用代码框架的 ANSI 语法高亮。 (默认开启) |
--no-comments | 将注释写入生成的输出。 (默认为真) |
--retain-lines | 保留行号。这将导致非常丑陋的代码。 |
--compact [true|false|auto] | 不要包含多余的空白字符和行终止符。 |
--minified | 打印时保存尽可能多的字节。 (默认为假) |
--auxiliary-comment-before [string] | 在任何注入的非用户代码之前打印注释。 |
--auxiliary-comment-after [string] | 在任何注入的非用户代码之后打印注释。 |
-s, --source-maps [true|false|inline|both] | |
--source-map-target [string] | 在返回的源映射上设置 file 。 |
--source-file-name [string] | 在返回的源映射上设置 sources[0] 。 |
--source-root [filename] | 所有源都是相对的根。 |
--module-root [filename] | AMD 模块格式化程序的可选前缀,它将被添加到模块定义的文件名之前。 |
-M, --module-ids | 为模块插入一个明确的 id。 |
--module-id [string] | 为模块 ID 指定自定义名称。 |
-x, --extensions [extensions] | 输入目录时要编译的扩展列表。 [.js,.jsx,.es6,.es,.mjs,.cjs] |
--keep-file-extension | 保留输入文件的文件扩展名。 |
-w, --watch | 在更改时重新编译文件。 |
--skip-initial-build | 观看前不要编译文件。 |
-o, --out-file [out] | 将所有输入文件编译成一个文件。 |
-d, --out-dir [out] | 将模块的输入目录编译为输出目录。 |
--relative | 编译到相对于输入目录或文件的输出目录。需要 --out-dir [out] |
-D, --copy-files | 编译不可编译文件的目录副本时。 |
--include-dotfiles | 在编译和复制不可编译文件时包含点文件。 |
--no-copy-ignored | 复制不可编译文件时排除被忽略的文件。 |
--verbose | 记录一切。此选项与 --quiet 冲突 |
--quiet | 不记录任何内容。此选项与 --verbose 冲突 |
--delete-dir-on-start | 编译前删除out目录。 |
--out-file-extension [string] | 为输出文件使用特定的扩展名 |
-V, --version | 输出版本号 |
-h, --help | 输出使用信息 |
小结
至此,三种babel配置的方式都已经了解了