Node.js 里面那些遗失的 ES6 特性

由于 Babel，WebPack， React 技术的流行， 小明同学已经开始在前端代码里面用上了 ECMAScript 2015 （以下称 ES6 ） 的众多特性。import, export, class, arrow function, let const 等等关键词甚至都已经开始变成小明的肌肉记忆。

但是等等，对于小明这样既写 React 又写 Node.js 的的人来说，又有点分裂了。经常性的在 Node.js 里面写 import xxx from 'xxx'; 然后被 Node.js 的解析器无情的拒绝；
另外对于一致性有点追求的人肯定受不了同一个仓库， 同一类脚本， 同一个人维护却有两种风格。

恩， 不能忍！

Node.js 对 ES6 的支持

其实 Node.js 对 ES6 的很多特性都已经开始支持了。 在 Node.js 使用的 JS 引擎 V8 里面将不同状态 ES6 特性分成了 3 个等级：

• shipping （已经分发并默认开启的特性）

• staged （已经分发， 但需要使用 –harmony 参数开启的特性）

• in progress （开发中， 还不稳定或者未实现的特性， 不推荐使用）

『shipping』 已经开启的 ES6 特性

本文使用的 Node.js 版本号：
稳定版本：4.2.4
对应 V8 引擎的版本：4.5.103.35
最新版本：5.3.0
对应 V8 引擎版本：4.6.85.31

目前默认开启的 ES6 特性如下：

• Block scoping

• let (strict mode only)

• const

• function-in-blocks (strict mode only [1])

• Classes (strict mode only)

• Collections

• Map

• WeakMap

• Set

• WeakSet

• Typed arrays

• Generators

• Binary and Octal literals

• Object literal extensions (shorthand properties and methods)

• Promises

• New String methods

• Symbols

• Template strings

• Arrow Functions

• new.target [2]

• Object.assign

• Spread operator [2]

对于这些官方引擎的特性，由于在底层实现，在性能与稳定性都有更高保障，在任何时候我们都应该优先使用。

『staged』 需要使用 --harmony 参数开启的 ES6 特性

• Symbol.toStringTag

• Array.prototype.includes （可以直接使用 polyfill 支持， 5.x 版本）

• Rest Parameters （可以直接用 transform-es2015-parameters 转换，支持更全面， 5.x 版本）

『in progress』 开发中的 ES 特性

--harmony_modules (enable "harmony modules")
--harmony_array_includes (enable "harmony Array.prototype.includes")
--harmony_regexps (enable "harmony regular expression extensions")
--harmony_proxies (enable "harmony proxies")
--harmony_sloppy (enable "harmony features in sloppy mode")
--harmony_unicode_regexps (enable "harmony unicode regexps")
--harmony_reflect (enable "harmony Reflect API")
--harmony_destructuring (enable "harmony destructuring")
--harmony_sharedarraybuffer (enable "harmony sharedarraybuffer")
--harmony_atomics (enable "harmony atomics")
--harmony_new_target (enable "harmony new.target")

『in progress』特性是那些将要支持（但具体时间未知）的特性。

开启模块的 ES6 模式

Babel 是一个插件式的 JavaScript 编译器， 能将一些当前 JS 引擎中不支持的特性和语法， 通过一个个特定插件，转换成当前引擎可以理解的 JS 脚本。 我们可以使用 Babel 来转换我们的 Node.js 脚本。

接下来， 我们就可以去 Babel 插件列表去选择对应的转换插件来为我们的 Node.js 插上隐形的翅膀了。

首先， 我们需要确认我们需要 Babel 添加哪些特性支持。

选择 ES 转换的原则

1. 优先使用原生特性

2. 优先选择那些稳定实现的特性。 由于一些 ES 特性需要引擎的底层支持才能完美支持， 通过代码转换可能很难完美支持， 对于这种特性只能不用或少用

基于这个原则， 小明筛选出如下插件。

• transform-strict-mode （由于很多 ES 特性需要 严格模式才能打开， 添加这个插件就会自动在所有文件上添加 'use strict';）

• transform-es2015-modules-commonjs （将 ES6 模块标准 转换成 Node.js 用的 CMD 模块标准）

• transform-es2015-spread （支持 ES6 的 spread 操作符）

• transform-es2015-destructuring （支持 赋值解构）

• transform-es2015-parameters （支持默认参数， 参数解构， 以及其他参数）

转换示例： import

from

import Mod from './mod';
new Mod();

to

'use strict';

var _mod = require('./mod');
var _mod2 = _interopRequireDefault(_mod);

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj }; 
}

new _mod2.default();

转换示例： export

from:

export default class Mod {

}

to:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
class Mod {}
exports.default = Mod;

上面这些选择的插件可以根据个人口味以及 Node.js 版本 进行添加或删除。选好模块， 我们就可以安装插件以及创建对应得babel配置文件去处理

• 精彩推荐

• 2019-12-04 09:49:05

  nuxt.js框架中 audio标签的坑

  nuxt.js框架中 audio标签的坑

• 2019-12-04 10:46:26

  nuxt.js项目中全局捕获异常并生成错误日志全过程

  　需求：客户在使用过程中页面报错时，可以生成错误记录传回服务器，以便改进。 　　步骤： 　　　　一.全局捕获异常， 　　　　二.发送到服务端， 　　　　三.生成错误日志。 　　一.全局捕获异常 如图，vue提供了errorHandle这个方法来处理全局异常，更多详细内容参见官网。

• 2019-12-04 10:47:59

  nuxt.js项目中全局捕获异常并生成错误日志全过程

  　需求：客户在使用过程中页面报错时，可以生成错误记录传回服务器，以便改进。 　　步骤： 　　　　一.全局捕获异常， 　　　　二.发送到服务端， 　　　　三.生成错误日志。 　　一.全局捕获异常 如图，vue提供了errorHandle这个方法来处理全局异常，更多详细内容参见官网。

• 2019-12-04 10:48:18

  vue 项目资源文件 static 和 assets 不说区别直接使用?

  assets中资源会webpack构建压缩到你代码中，而static文件直接引用。 static 中长存放类包、插件等第三方的文件，assets里放属资源文件比如自己资源图片、css文件、js文件。 引入资源的方式static文件夹可以使用~/static/方式引入, assets文件夹可以使用 ~@/assets 方式引入

• 2019-12-05 17:01:36

  Vue 结合 Axios 接口超时统一处理

  当网路慢的时候。又或者公司服务器不在内地的时候，接口数据请求不回来超时报错的情况相信大家肯定遇到过的，这里我把我公司项目请求超时的处理方法分享下，希望看过后有帮助。

• 2019-12-05 17:13:40

  JS模板工具lodash.template的简单用法

  lodash是从underscore分支的一个项目，之前我写了一篇JS模板工具underscore.template的简单用法，lodash跟underscore很相似，这也简单介绍一下lodash的template方法。 先把underscore的文章中用过的代码贴过来，把underscore的js文件换成lodash的js，其他一字不改，然后我们试试：

• 2019-12-06 09:22:41

  png压缩工具开源代码

  一个可以进行有损图片压缩的命令行工具和代码库。

• 2019-12-06 10:45:34

  date-fns 格式化日期

  date-fns，格式化日期

• 2019-12-06 10:47:29

  date-fns日期工具的使用方法详解

  isToday() 判断传入日期是否为今天 isYesterday() 判断传入日期是否为昨天 isTomorrow() 判断传入日期是否为 format() 日期格式化 addDays() 获得当前日期之后的日期 addHours() 获得当前时间n小时之后的时间点 addMinutes() 获得当前时间n分钟之后的时间 addMonths() 获得当前月之后n个月的月份 subDays() 获得当前时间之前n天的时间 subHours() 获得当前时间之前n小时的时间 subMinutes() 获得当前时间之前n分钟的时间 subMonths() 获得当前时间之前n个月的时间 differenceInYears() 获得两个时间相差的年份 differenceInWeeks() 获得两个时间相差的周数 differenceInDays() 获得两个时间相差的天数 differenceInHours() 获得两个时间相差的小时数 differenceInMinutes() 获得两个时间相差的分钟数

• 2019-12-06 10:49:39

  npm 查看源 换源

  npm，cnpm，查看源，切换源，npm config set registry https://registry.npmjs.org