阅读数:

让nodejs支持es6

0

说明

nodejs项目典型的框架就是express,成熟上手快,但是网上copy下来的脚手架大都不支持es6语法,如何在node
项目中引入es6,让我们愉快的看教程:

实现

es-checker

搞es6之前,我们先看看当前我们安装的nodejs版本对es6的支持情况,安装一个叫es-checker插件,很容易的就可以看出
当前版本对es6的兼容程度

1
npm -g install es-checker

然后会得到形似如下的结果

1
2
3
4
=========================================
Passes 37 feature Detections
Your runtime supports 88% of ECMAScript 6
=========================================

我们看到对es6的语法支持高达88%,(我的node版本是v6.2.2),当然支持率越高越好,如果浏览器也支持es6,那么我们不需要引用其他编译工具
便可以直接运行项目了,但是情况并不友好,有些戳我检查浏览器es6支持度不支持es6

为了让项目支持更多的浏览器,我们需要神器babel,它可以将es6转换为es5,也就是说你写你的es6,转化的事不用你自己操心了,交给babel就行了

如何安装babel呢,也很简单

安装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

1
2
3
'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转码等

1
2
3
4
5
6
7
// 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

1
2
3
4
5
6
7
8
9
10
11
12
// 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
'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
1
2
3
4
#!/usr/bin/env node
require('./babel-reg');
var server = require('./server.babel');
server.start();
  • 运行
1
2
// nodemon 热加载插件 ,当然你可以用node
nodemon server.js

最后的最后

下期将介绍如何利用webpack和babel-node 将es6项目打包为es5项目


^-^欢迎回复交流^-^


0
赏点咖啡钱^.^