2017-05-12

聚沙

ES6 Modules

1
2

chrome://flags/#enable-javascript-harmony
chrome://flags/#enable-experimental-web-platform-features

ES2015 remove strict mode

严格模式

在编写代码的过程中，我们使用 strict mode 是一种不错的方式，严格模式会将 JavaScript 陷阱直接变成明显的错误，比如未声明导致的全局变量，可以让我们开发过程中就发现错误。

众所周知，JavaScript 这门语言之前存在大量不好的设计，使用严格模式意味着在采用一种限制性更高的方式编写代码，同时更 “安全”。

但这里所谓的安全在生产环境有可能是另外一回事，尤其是对于那些历史的代码，所以我们更倾向于在生产环境去除严格模式。

ES2015 +

现在越来越多的人已经在使用更强大，更具有表现力的 ES2015 + 编写代码，可能会使用到 babel 来转化成使用与生产环境运行，在使用 preset es2015 时，会自动加入 'use strict'。

babel 的处理方式是将 ES2015 模块转换成 CommonJS 格式的，然后再统一处理，即 transform-es2015-modules-commonjs，这个模块位于 preset es2015 中，并且依赖于 babel-plugin-transform-strict-mode

也许你会想去掉严格模式

也许你会想去掉严格模式，毕竟对于一些历史代码，很难预测加入严格模式会导致什么异常。

可以从两个方面来考虑：

  • 第一，在处理过程中去掉 'use strict'，这里不用我们自己去写了，借助这个插件 transform-remove-strict-mode
  • 第二，不用 transform-es2015-modules-commonjs，可以使用 webpack 2 直接处理 ES6 模块

方案一

1

npm install babel-plugin-transform-remove-strict-mode --save-dev

修改 .babelrc

1
2
3
4
5
6
7
8
9
10

{
    "presets": [
        ["es2015"],
        "stage-0",
        "react"
    ],
    "plugins": [
        "transform-remove-strict-mode"
    ]
}

方案二

modules

"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".

Enable transformation of ES6 module syntax to another module type.

Setting this to false will not transform modules.

我们去掉 preset es2015 的模块处理，改成 webpack 自己的

1
2
3
4
5
6
7

{
    "presets": [
        ["es2015", { "modules": false }],
        "stage-0",
        "react"
    ]
}

这种方案也能解决之前引发的问题，因为之前的模块是 ES5 编写的，使用 AMD。

但是，参考 http://www.ecma-international.org/ecma-262/6.0/#sec-strict-mode-code ，在 ES6 语法下，模块系统以及 class 等仍然都是工作在 strict mode 下的，而 webpack2 的也确实是这样处理的。

实现对语言本身是没问题的，使用新语法意味着我们要抛弃掉以前一些设计不好的地方，编写高质量的代码。

对比

相比而言，方案二更合适，因为方案一处理的过程实际是删除所有'use strict'，有时候未必符合你本来的意愿。

采用方案二还有一些好处，比如可以使用 webpack2 已经支持的 Tree shaking 优化技术，因为这项技术基于 ES6 Modules，得让 webpack 直接处理才能使用。

后续

这种属于历史遗留问题，不小心引入的全局变量，类似的代码质量问题还不少。

所以，我们使用 lint 工具来帮助我们避免这种问题，对于代码质量的要求，我们必须苛刻。

严格模式意味用一种更合理的编码方式，全局变量当然是不被允许的。

参考

阅读

开发者技能修炼的五个等级

重构之十六字心法

重构威力无边，就像是武侠小说中的一件插在石头上的上古神器，但同样也不是一般人可以轻松驾驭的。如果运用不当，造成的损害也会同样巨大。如何将重构这件神器运用自如，发挥其最大的威力，也是我门一直在探寻的，即重构的手法和心法。

Quantum Up Close: What is a browser engine?

Mozilla 正在改造 Firefox 全新的浏览器引擎 Quantum ，这篇文章通过这个过程介绍如何来打造浏览器引擎。

Webpack Announces New Webpack CLI

Webpack 发布新的 Webpack CLI，还能很方便地自动将配置迁移到 Webapck2，快来尝试吧。

Visual Studio 2017 for Mac: Release Notes

微软在 Build 2017 大会发布 Visual Studio 2017 for Mac 正式版，开发者终于能在 Windows 和 Mac 环境之间实现无缝衔接，使用它同时开发服务端和客户端的应用程序。

ES6 Modules in Chrome Canary (M60+)

Comments