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配置文件去处理

• 精彩推荐

• 2020-04-01 15:28:36

  vue通过options访问methods，调用方法this指向我问题

  我们用vue的底层方法options，可以解决很多问题。但是这个时候调用方法，this指向会发生很大的变化，会很影响我们的预期，我们可以给方法指定this

• 2020-04-01 15:36:52

  CSS3中的transition属性详解

  transition: property duration timing-function delay transition属性是个复合属性，她包括以下几个子属性： transition-property ：规定设置过渡效果的css属性名称 transition-duration ：规定完成过渡效果需要多少秒或毫秒 transition-timing-function ：指定过渡函数，规定速度效果的速度曲线 transition-delay ：指定开始出现的延迟时间

• 2020-04-01 15:39:52

  Vue中鼠标事件，mousehover，模拟@hover

  vue中并没有 @hover 事件，但是可以使用 @mouseenter 和 @mouseleave 来模拟hover操作。

• 2020-04-01 18:38:54

  Intellij IDEA 解析less 为css

  Intellij IDEA,解析less，css

• 2020-04-02 08:44:01

  Vue.extend挂载到实例上

  用Vue，extend，做一个全局组件

• 2020-04-02 13:06:16

  vue项目使用.env文件配置全局环境变量

  属性名必须以VUE_APP_开头，比如VUE_APP_XXX

• 2020-04-02 17:02:25

  vue怎么能像jquery那样获得数据

  有时候我们需要获得动态的元素，但是我们没法直接用vue语法，vue一共了当前组件的对象，我们可以避免使用document.get...之类的。

• 2020-04-02 21:38:15

  Nginx向ExpressJS转发真实IP地址

  由于服务器配置了Nginx的反向代理，在ExpressJS中无法获取到真实的IP地址。本文就介绍了如何配置Nginx以及ExpressJS使其可以显示用户的真实地址。

• 2020-04-03 08:53:06

  使用自己的QQ邮箱发送自动发送邮件

  话说网上发送邮件的代码很多，但是我由于不细心，导致拿别人的代码发送邮件老是失败，今天就说说几个要注意的地方吧！！！

• 2020-04-03 10:20:20

  Vue 项目性能优化

  Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成：