Babel神器ES6转ES5

最新推荐文章于 2025-06-05 09:11:26 发布

原创最新推荐文章于 2025-06-05 09:11:26 发布 · 1.4k 阅读

CC 4.0 BY-SA版权

本文介绍了如何配置Babel的.babelrc文件，包括设置转码规则和使用babel-cli进行命令行转码。同时，文章还提到了在项目中安装Babel以避免全局环境依赖，并给出了ES2015转码规则的例子以及测试过程。文章最后讨论了进阶配置，如添加更多转换规则和利用钩子自动转码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

声明：这些文章是自己记笔记用的！！

配置.balbelrc文件

Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下。
注意：文件名为.balbelrc;与这里写图片描述文件中的一致。

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

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

然后，将这些规则加入.babelrc。

  {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

注意：这块中，用到哪个添加哪个，如果添加了如：’react‘而未做相关设置，babel将不能识别切不能正常编译，运行npm run build 时出现：

//.babelrc
{
    "presets":[
        "es2015",
        "react"
    ],
    "plugins":[]
}

注意，以下所有Babel工具和模块的使用，都必须先写好.babelrc。

命令行转码babel-cli

Babel提供babel-cli工具，用于命令行转码。
它的安装命令如下。

$ npm install --global babel-cli

基本用法如下。

# 转码结果输出到标准输出
$ babel example.js

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

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

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

上面代码是在全局环境下，进行Babel转码。这意味着，如果项目要运行，全局环境必须有Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的Babel。

一个解决办法是将babel-cli安装在项目之中。

# 安装
$ npm install --save-dev babel-cli

然后，改写package.json。（其实执行了上面的install后会自动在devDependencies中加入babel-cli）

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

转码的时候，就执行下面的命令。

$ npm run build

例：
简单的一个例子目录：
这里写图片描述

pakage.json文件：

这里写图片描述

附

安装babel

安装
1

2
npm install babel-cli --save-dev

npm install babel-cli -g
安装 babel-preset-es2015

ES2015转码规则

1	npm install babel-preset-es2015 --save-dev

新建 .babelrc文件
复制如下内容到文件中

1	{ "presets": [ "es2015" ], "plugins": [] }

babel安装完毕。

测试

新建test.js

'use strict';

let [a,b,c] = [1,2,3];

console.log(a,b,c);

运行

1	babel-node test

输出 1 2 3,说明项目现在应该可以支持基本的es6语法了。

最后

babelrc文件中可以配置其他转换规则,比如 ES7,react转码等

// react转码

npm install --save-dev babel-preset-react

// es7 0-3个版本

npm install --save-dev babel-preset-stage-0

npm install --save-dev babel-preset-stage-1

npm install --save-dev babel-preset-stage-2

npm install --save-dev babel-preset-stage-3

对应的babelrc文件内容变为

1	"presets": ["es2015", "react", "stage-0"]

进阶

为了高效的进行es6转码,我们借助babel-core/register这个钩子,对js,jsx,es6等文件进行babel转码,

babel-core
1

2
npm install babel-core -g

npm install babel-core --save-dev
新建babel_reg.js,实例.babelrc

// enable runtime transpilation to use ES6/7 in node

var fs = require('fs');

var path = require('path');

var babelrc = fs.readFileSync(path.resolve(__dirname, '../.babelrc'));

var config;

try {

config = JSON.parse(babelrc);

} catch (err) {

console.error('==> ERROR: Error parsing your .babelrc.');

console.error(err);

}

require('babel-core/register')(config);

新建server.babel.js

'use strict';

/**

* Module dependencies.

function start () {

const app = require('../server/main');

const http = require('http');

/**

* Get port from environment and store in Express.

app.set('port', port);

/**

* Create HTTP server.

const server = http.createServer(app);

/**

* Listen on provided port, on all network interfaces.

server.listen(port);

}

module.exports = {

start

};

启动文件sever.js

#!/usr/bin/env node

require('./babel-reg');

var server = require('./server.babel');

server.start();

运行

1 2	// nodemon 热加载插件 ,当然你可以用node nodemon server.js