Babel 是一个 JavaScript 编译器！

Babel 是一个广泛使用的 JavaScript 编译器，可以让你在当前环境下使用最新的 JavaScript 语法（如 ES6+），并将其编译为兼容旧环境的代码。

代码示例

index.js

1
2
3

import {test} from 'test'

export default test

步骤详解

第一步，安装 @babel/node

cnpm i -D @babel/node
npx babel-node index.js

此时报错

1	Error: Cannot find module '@babel/core'

第二步，安装 @babel/core

cnpm i -D @babel/core
npx babel-node index.js

此时报错

import * as test from 'test';
^^^^^^

SyntaxError: Cannot use import statement outside a module
意思是：SyntaxError：无法在模块外部使用import语句

第三步，添加 Babel 配置文件

创建 .babelrc 或 babel.config.json，内容如下：

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

npx babel-node index.js

此时报错

1	Error: Cannot find module '@babel/preset-env'

第四步，安装 @babel/preset-env

cnpm i -D @babel/preset-env
npx babel-node index.js

此时如果没有报错，说明配置成功！

常见问题与解决方法

ReferenceError: regeneratorRuntime is not defined

解决方法：安装依赖
cnpm i -D @babel/plugin-transform-runtime @babel/runtime-corejs3

并在 Babel 配置文件的 plugins 中添加如下配置：

"plugins": [
  [
    "@babel/plugin-transform-runtime",
    {
      "corejs": 3,
      "regenerator": true,
      "useESModules": true,
      "helpers": true
    }
  ]
]