Node 环境下配置 Babel

最近用 Koa2 搞 node 服务端应用，鉴于官网文档太散，简单记录下配置 babel 的过程：

1. 安装需要的babel包(全家桶)

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node @babel/plugin-transform-runtime

2. 安装nodemon、core-js(我全局安装了nodemon，没装的话安装在本地也可)

npm install --save nodemon core-js

3. 创建 📃babel.config.json，并写入以下内容：

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": { // 不传问题不大
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage", // 仅引入使用到的 polyfill (转换语法的代码)
        "corejs": "3.6.5" // 当"useBuiltIns"指定为"usage"或"entry"时，此配置才有效果
      }
    ]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

@babel/env的可选参数详见这里。如不传target，默认会将所有 ES2015-ES2020 代码转换为 ES5 兼容版本，可以根据你所需要支持的浏览器进行调整。

4. 使用@babel/register进行动态/即时编译

npm install --save-dev @babel/register 

📃src/index.js

require('@babel/register')
require('./app') // 入口文件

📃package.json

{
  "scripts": {
    "start:register": "nodemon src",
  }
}

这样真正的入口app.js将由 babel 自动转换。

5. 生产环境用babel命令先编译脚本，再运行编译后的版本

在📃package.json添加编译脚本"build" 和 运行编译后代码的"start"启动脚本

{
  "scripts": {
    "build": "babel src -d dist", // -d 是 --out-dir 的缩写
    "start": "node dist/app.js"
  }
{

现在可以npm run start启动了

6. 开发环境用babel-node命令编译脚本：

使用就是简单地将node指令换成babel-node，so easy：

{
  "scripts": {
    "dev": "babel-node src"
  }
}

加上nodemon可以实时热更新项目，必须用--exec以运行非 node 脚本

{
"scripts": {
  "dev": "nodemon --exec babel-node src"
  }
}

7. 让我们来整合一下

为了简化脚本命令，我们先安装下npm-run-all

npm i -S npm-run-all

以及为了跨平台设置环境变量，安装cross-env

npm i -D cross-env

📃package.json：

{
  "scripts": {
    "register": "nodemon src",
    "clean": "rm -rf dist",
    "server": "nodemon --exec babel-node src",
    "server:prod": "node dist",
    "build": "babel src -d dist",
    "dev": "NODE_ENV=development npm-run-all server",
    "prod": "NODE_ENV=production npm-run-all clean build server:prod",
    "test": "npm run build && mocha --require @babel/register"
  },
}

开发环境：npm run dev
生产环境：npm run prod