正视Babel配置

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配置的方式都已经了解了

二、什么是babel-runtime?