Tk Wiki

Appearance

Babel ​

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行

shell
npm install --save-dev @babel/core

配置文件 - .babelrc ​

存放根目录下

js
{
  "presets": [],
  "plugins": []
}

presets字段设定转码规则，官方提供以下的规则集

shell
# 最新转码规则
npm install --save-dev @babel/preset-env

# react 转码规则
npm install --save-dev @babel/preset-react
js
 {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

@babel/cli ​

Babel 提供命令行工具@babel/cli，用于命令行转码

shell
npm install --save-dev @babel/cli
shell
# 转码结果输出到标准输出
npx babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
npx babel example.js --out-file compiled.js
# 或者
npx babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
npx babel src --out-dir lib
# 或者
npx babel src -d lib

# -s 参数生成source map文件
npx babel src -d lib -s

@babel/node ​

@babel/node模块的babel-node命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码。

shell
npm install --save-dev @babel/node

进入 REPL 环境

js
npx babel-node
> (x => x * 2)(1)
2

运行脚本

js
npx babel-node es6.js
2

@babel/register ​

@babel/register模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用 Babel 进行转码。

  • 只会对 require 加载命令转码
  • 实时转码，只适合开发环境
shell
npm install --save-dev @babel/register
js
// index.js
require('@babel/register')
require('./es6.js')
js
node index.js
2

@babel/standalone ​

Babel 也可以用于浏览器环境

html
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  // Your ES6 code
</script>

ployfill ​

Babel 默认转 Javascript 语法，而不转 API，如 Proxy、Set、Map 等全局对象

shell
$ npm install --save-dev core-js regenerator-runtime

示例：Array.from 的 Babel 支持，使用core-js和regenerator-runtime(后者提供 generator 函数的转码)，为当前环境提供一个垫片

js
import 'core-js'
import 'regenerator-runtime/runtime' // 进行 generator 函数转码
// 或者
require('core-js')
require('regenerator-runtime/runtime')

Babel 默认不转码的 AP 可以查看babel-plugin-transform-runtime模块的definitions.js文件。

相关链接 ​

[-] babel