>

ES2016宗旨内容

- 编辑:至尊游戏网站 -

ES2016宗旨内容

Webpack 之 treeShaking

2018/08/16 · 基础技术 · webpack

原文出处: easonyq   

在 github 上直接观看 markdown 会把图片转存到缓存中,github 转存后的图片清晰度很有问题,因此如果图片看不清,可以移步知乎上的相同文章

webpack 2.0 开始引入 tree shaking 技术。在介绍技术之前,先介绍几个相关概念:

  • AST 对 JS 代码进行语法分析后得出的语法树 (Abstract Syntax Tree)。AST语法树可以把一段 JS 代码的每一个语句都转化为树中的一个节点。
  • DCE Dead Code Elimination,在保持代码运行结果不变的前提下,去除无用的代码。这样的好处是:

    • 减少程序体积
    • 减少程序执行时间
    • 便于将来对程序架构进行优化

    而所谓 Dead Code 主要包括:

    • 程序中没有执行的代码 (如不可能进入的分支,return 之后的语句等)
    • 导致 dead variable 的代码(写入变量之后不再读取的代码)

tree shaking 是 DCE 的一种方式,它可以在打包时忽略没有用到的代码。

图片 1

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。

机制简述

tree shaking 是 rollup 作者首先提出的。这里有一个比喻:

如果把代码打包比作制作蛋糕。传统的方式是把鸡蛋(带壳)全部丢进去搅拌,然后放入烤箱,最后把(没有用的)蛋壳全部挑选并剔除出去。而 treeshaking 则是一开始就把有用的蛋白蛋黄放入搅拌,最后直接作出蛋糕。

因此,相比于 排除不使用的代码,tree shaking 其实是 找出使用的代码

基于 ES6 的静态引用,tree shaking 通过扫描所有 ES6 的 export,找出被 import 的内容并添加到最终代码中。 webpack 的实现是把所有 import 标记为有使用/无使用两种,在后续压缩时进行区别处理。因为就如比喻所说,在放入烤箱(压缩混淆)前先剔除蛋壳(无使用的 import),只放入有用的蛋白蛋黄(有使用的 import)

虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。

使用方法

首先源码必须遵循 ES6 的模块规范 (import & export),如果是 CommonJS 规范 (require) 则无法使用。

根据webpack官网的提示,webpack2 支持 tree-shaking,需要修改配置文件,指定babel处理js文件时不要将ES6模块转成CommonJS模块,具体做法就是:

在.babelrc设置babel-preset-es2015的modules为fasle,表示不对ES6模块进行处理。

JavaScript

// .babelrc { "presets": [ ["es2015", {"modules": false}] ] }

1
2
3
4
5
6
// .babelrc
{
    "presets": [
        ["es2015", {"modules": false}]
    ]
}

经过测试,webpack 3 和 4 不增加这个 .babelrc 文件也可以正常 tree shaking

在我们正式讲解ES6语法之前,我们得先了解下Babel。

Tree shaking 两步走

webpack 负责对代码进行标记,把 import & export 标记为 3 类:

  1. 所有 import 标记为 /* harmony import */
  2. 被使用过的 export 标记为 /* harmony export ([type]) */,其中 [type] 和 webpack 内部有关,可能是 bindingimmutable 等等。
  3. 没被使用过的 import 标记为 /* unused harmony export [FuncName] */,其中 [FuncName] 为 export 的方法名称

之后在 Uglifyjs (或者其他类似的工具) 步骤进行代码精简,把没用的都删除。

Babel

实例分析

所有实例代码均在demo/webpack 目录

Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel,具体过程可直接在Babel官网查看:

方法的处理

JavaScript

// index.js import {hello, bye} from './util' let result1 = hello() console.log(result1)

1
2
3
4
5
6
// index.js
import {hello, bye} from './util'
 
let result1 = hello()
 
console.log(result1)

JavaScript

// util.js export function hello () { return 'hello' } export function bye () { return 'bye' }

1
2
3
4
5
6
7
8
// util.js
export function hello () {
  return 'hello'
}
 
export function bye () {
  return 'bye'
}

编译后的 bundle.js 如下:

JavaScript

/******/ ([ /* 0 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(1); let result1 = Object(__WEBPACK_IMPORTED_MODULE_0__util__["a" /* hello */])() console.log(result1) /***/ }), /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (immutable) */ __webpack_exports__["a"] = hello; /* unused harmony export bye */ function hello () { return 'hello' } function bye () { return 'bye' }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(1);
 
 
let result1 = Object(__WEBPACK_IMPORTED_MODULE_0__util__["a" /* hello */])()
 
console.log(result1)
 
 
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = hello;
/* unused harmony export bye */
function hello () {
  return 'hello'
}
 
function bye () {
  return 'bye'
}

注:省略了 bundle.js 上边 webpack 自定义的模块加载代码,那些都是固定的。

对于没有使用的 bye 方法,webpack 标记为 unused harmony export bye,但是代码依旧保留。而 hello 就是正常的 harmony export (immutable)

之后使用 UglifyJSPlugin 就可以进行第二步,把 bye 彻底清除,结果如下:

图片 2

只有 hello 的定义和调用。

图片 3

类(class) 的处理

JavaScript

// index.js import Util from './util' let util = new Util() let result1 = util.hello() console.log(result1)

1
2
3
4
5
6
// index.js
import Util from './util'
 
let util = new Util()
let result1 = util.hello()
console.log(result1)

JavaScript

// util.js export default class Util { hello () { return 'hello' } bye () { return 'bye' } }

1
2
3
4
5
6
7
8
9
10
// util.js
export default class Util {
  hello () {
    return 'hello'
  }
 
  bye () {
    return 'bye'
  }
}

编译后的 bundle.js 如下:

JavaScript

/******/ ([ /* 0 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(1); let util = new __WEBPACK_IMPORTED_MODULE_0__util__["a" /* default */]() let result1 = util.hello() console.log(result1) /***/ }), /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; class Util { hello () { return 'hello' } bye () { return 'bye' } } /* harmony export (immutable) */ __webpack_exports__["a"] = Util;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util__ = __webpack_require__(1);
 
 
let util = new __WEBPACK_IMPORTED_MODULE_0__util__["a" /* default */]()
let result1 = util.hello()
console.log(result1)
 
 
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
"use strict";
class Util {
  hello () {
    return 'hello'
  }
 
  bye () {
    return 'bye'
  }
}
/* harmony export (immutable) */ __webpack_exports__["a"] = Util;

注意到 webpack 是对 Util 类整体进行标记的(标记为被使用),而不是分别针对两个方法。也因此,最终打包的代码依然会包含 bye 方法。这表明 webpack tree shaking 只处理顶层内容,例如类和对象内部都不会再被分别处理。

这主要也是由于 JS 的动态语言特性所致。如果把 bye() 删除,考虑如下代码:

JavaScript

// index.js import Util from './util' let util = new Util() let result1 = util[Math.random() > 0.5 ? 'hello', 'bye']() console.log(result1)

1
2
3
4
5
6
// index.js
import Util from './util'
 
let util = new Util()
let result1 = util[Math.random() > 0.5 ? 'hello', 'bye']()
console.log(result1)

编译器并不能识别一个方法名字究竟是以直接调用的形式出现 (util.hello()) 还是以字符串的形式 (util['hello']()) 或者其他更加离奇的方式。因此误删方法只会导致运行出错,得不偿失。

babel

副作用

副作用的意思某个方法或者文件执行了之后,还会对全局其他内容产生影响的代码。例如 polyfill 在各类 prototype 加入方法,就是副作用的典型。(也可以看出,程序和吃药不同,副作用不全是贬义的)

副作用总共有两种形态,是精简代码不得不考虑的问题。我们平时在重构代码时,也应当以相类似的思维去进行,否则总有踩坑的一天。

最常用的ES6特性

模块引入带来的副作用

JavaScript

// index.js import Util from './util' console.log('Util unused')

1
2
3
4
// index.js
import Util from './util'
 
console.log('Util unused')

JavaScript

// util.js console.log('This is Util class') export default class Util { hello () { return 'hello' } bye () { return 'bye' } } Array.prototype.hello = () => 'hello'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// util.js
console.log('This is Util class')
 
export default class Util {
  hello () {
    return 'hello'
  }
 
  bye () {
    return 'bye'
  }
}
 
Array.prototype.hello = () => 'hello'

如上代码经过 webpack + uglify 的处理后,会变成这样:

图片 4

虽然 Util 类被引入之后没有进行任何使用,但是不能当做没引用过而直接删除。在混合后的代码中,可以看到 Util 类的本体 (export 的内容) 已经没有了,但是前后的 console.log 和对 Array.prototype 的扩展依然保留。这就是编译器为了确保代码执行效果不变而做的妥协,因为它不知道这两句代码到底是干嘛的,所以他默认认定所有代码 均有 副作用。

let,  const,  class,  extends,  super,   arrow functions,  template string,  destructuring, default,  rest, arguments 

方法调用带来的副作用

JavaScript

// index.js import {hello, bye} from './util' let result1 = hello() let result2 = bye() console.log(result1)

1
2
3
4
5
6
7
// index.js
import {hello, bye} from './util'
 
let result1 = hello()
let result2 = bye()
 
console.log(result1)

JavaScript

// util.js export function hello () { return 'hello' } export function bye () { return 'bye' }

1
2
3
4
5
6
7
8
// util.js
export function hello () {
  return 'hello'
}
 
export function bye () {
  return 'bye'
}

我们引入并调用了 bye(),但是却没有使用它的返回值 result2,这种代码可以删吗?(扪心自问,如果是你人肉重构代码,直接删掉这行代码的可能性有没有超过 90% ?)

图片 5

webpack 并没有删除这行代码,至少没有删除全部。它确实删除了 result2,但保留了 bye() 的调用(压缩的代码表现为 Object(r.a)())以及 bye() 的定义。

这同样是因为编译器不清楚 bye() 里面究竟做了什么。如果它包含了如 Array.prototye 的扩展,那删掉就又出问题了。

这些是ES6最常用的几个语法,基本上学会它们,我们就可以走遍天下都不怕啦!我会用最通俗易懂的语言和例子来讲解它们,保证一看就懂,一学就会。

如何解决副作用?

我们很感谢 webpack 如此严谨,但如果某个方法就是没有副作用的,我们该怎么告诉 webpack 让他放心大胆的删除呢?

有 3 个方法,适用于不同的情况。

let, const

这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途。

首先来看下面这个例子:

var name = 'zach';

while (true) {

    var name = 'obama';

    console.log(name);  //obama break

}

console.log(name) //obama

使用var 两次输出都是obama,这是因为ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。

let name='zach';

while(true) { 

    let name= 'obama';

    console.log(name); //obama

    break;

}

console.log(name);  //zach

另外一个var带来的不合理场景就是用来计数的循环变量泄露为全局变量,看下面的例子:

vara = [];

for(vari =0; i <10; i++) { 

     a[i] = function(){

        console.log(i); 

     };

}

a[6]();  // 10

上面代码中,变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。而使用let则不会出现这个问题。

vara = [];

for(leti =0; i <10; i++) { 

    a[i] = function(){

        console.log(i); 

     };

}

a[6]();// 6

再来看一个更常见的例子,了解下如果不用ES6,而用闭包如何解决这个问题。

varclickBoxs = document.querySelectorAll('.clickBox');

for(vari =0; i < clickBoxs.length; i++){ 

    clickBoxs[i].onclick =function(){

        console.log(i);    

    }

}

我们本来希望的是点击不同的clickBox,显示不同的i,但事实是无论我们点击哪个clickBox,输出的都是5。下面我们来看下,如何用闭包搞定它。

function iteratorFactory(i){

    var onclick = function(e) {

    console.log(i);

    }

return onclick;

}

var clickBoxs = document.querySelectorAll('.clickBox');

for(vari=0;i< clickBoxs.length;i++){ 

    clickBoxs[i].onclick = iteratorFactory(i);

}

const也用来声明变量,但是声明的是常量。一旦声明,常量的值就不能改变。

const PI= Math.PI;

PI=23; //Modulebuild failed: SyntaxError: /es6/app.js:"PI"is read-only

当我们尝试去改变用const声明的常量时,浏览器就会报错。

const有一个很好的应用场景,就是当我们引用第三方库的时声明的变量,用const来声明可以避免未来不小心重命名而导致出现bug:

const monent = require('moment');

pure_funcs

JavaScript

// index.js import {hello, bye} from './util' let result1 = hello() let a = 1 let b = 2 let result2 = Math.floor(a / b) console.log(result1)

1
2
3
4
5
6
7
8
9
// index.js
import {hello, bye} from './util'
 
let result1 = hello()
let a = 1
let b = 2
let result2 = Math.floor(a / b)
 
console.log(result1)

util.js 和之前相同,不再重复。有差别的是 webpack.config.js,需要增加参数 pure_funcs,告诉 webpack Math.floor 是没有副作用的,你可以放心删除:

JavaScript

plugins: [ new UglifyJSPlugin({ uglifyOptions: { compress: { pure_funcs: ['Math.floor'] } } }) ],

1
2
3
4
5
6
7
8
9
plugins: [
  new UglifyJSPlugin({
    uglifyOptions: {
      compress: {
          pure_funcs: ['Math.floor']
      }
    }
  })
],

图片 6

图片 7

在添加了 pure_funcs 配置后,原来保留的 Math.floor(.5) 被删除了,达到了我们的预期效果。

但这个方法有一个很大的局限性,在于如果我们把 webpack 和 uglify 合并使用,经过 webpack 的代码的方法名已经被重命名了,那么在这里配置原始的方法名也就失去了意义。而例如 Math.floor 这类全局方法不会重命名,才会生效。因此适用性不算太强。

class, extends, super

ES6这三个特性解决了ES5中最令人头疼的的几个部分:原型、构造函数,继承...

ES6提供了更接近传统语言的写法,引入了Class(类)这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。

class Animal { 

    constructor() {

        this.type='animal' 

    } 

    says(say) { 

        console.log(this.type+ ' says ' + say);    

    }

}

let animal = new Animal();

animal.says('hello');//animal says hello

class Cat extends Animal { 

    constructor() {

        super();

        this.type = 'cat'; 

    }

}

let cat =new Cat();

cat.says('hello');  //cat says hello

上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

P.S 如果你写react的话,就会发现以上三个东西在最新版React中出现得很多。创建的每个component都是一个继承React.Component的类。详见react文档

package.json 的 sideEffects

webpack 4 在 package.json 新增了一个配置项叫做 sideEffects, 值为 false 表示整个包都没有副作用;或者是一个数组列出有副作用的模块。详细的例子可以查看 webpack 官方提供的例子。

从结果来看,如果 sideEffects 值为 false,当前包 export 了 5 个方法,而我们使用了 2 个,剩下 3 个也不会被打包,是符合预期的。但这要求包作者的自觉添加,因此在当前 webpack 4 推出不久的情况下,局限性也不算小。

arrow function

这个是ES6最常用的一个新特性,用它来写function比原来的写法要简洁清晰很多:

function (i) {

    return i +1;  

};   //ES5

(i) => i +1;  //ES6

简直是简单的不像话对吧...

如果方程比较复杂,则需要用{ }把代码包起来:

function(x, y) { 

     x++; 

     y--;

    return x + y;

};

(x, y) => {

    x++; 

    y--;

    return x+y;

};

除了看上去更简洁以外,arrow function还有一项超级无敌的功能!

长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。例如:

class Animal {

    constructor() {

        this.type ='animal';

    } 

     says(say) { 

         setTimeout(function(){

            console.log(this.type +' says '+ say);        

        },1000); 

    }

}

var animal = new Animal();

animal.says('hi');//undefined says hi

运行上面的代码会报错,这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行,传统的解决方法有两种:

  1. 第一种是将this传给self,再用self来指代this.

says(say) { 

    varself = this; 

    setTimeout(function(){

        console.log(self.type +' says '+ say);       

    },1000);

}

  1. 第二种方法是用bind(this),即

says(say) { 

    setTimeout(function() {

        console.log(this.type +' says '+ say);

    }.bind(this),1000);

}

但现在我们有了箭头函数,就不需要这么麻烦了:

class Animal { 

    constructor() {

        this.type ='animal';

    } 

    says(say) { 

        setTimeout( ()=>{

            console.log(this.type +' says '+ say); 

         },1000);

    }

}

var animal = new Animal(); 

animal.says('hi');//animal says hi

当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。

template string

这个东西也是非常有用,当我们要插入大段的html内容到文档中时,传统的写法非常麻烦,所以之前我们通常会引用一些模板工具库,比如mustache等等。

大家可以先看下面一段代码:

$("#result").append("

There are <b>"+ basket.count +"</b> "+"items in your basket, "+"<em>"+ basket.onSale +" </em>are on sale!

");

我们要用一堆的'+'号来连接文本与变量,而使用ES6的新特性模板字符串``后,我们可以直接这么来写:

$("#result").append(` 

 There are <b>${basket.count} </b>itemsinyour basket, <em>${basket.onSale}</em> areonsale!

`);

用反引号()来标识起始,用${}`来引用变量,而且所有的空格和缩进都会被保留在输出之中,是不是非常爽?!

React Router从第1.0.3版开始也使用ES6语法了,比如这个例子:

<Link to = {' /taco/${taco.name} '} >{taco.name}</Link>

React Router

concatenateModule

webpack 3 开始加入了 webpack.optimize.ModuleConcatenateModulePlugin(),到了 webpack 4 直接作为 `mode = ‘production’ 的默认配置。这是对 webpack bundle 的一个优化,把本来“每个模块包裹在一个闭包里”的情况,优化成“所有模块都包裹在同一个闭包里”的情况。本身对于代码缩小体积有很大的提升,这里也能侧面解决副作用的问题。

依然选取这样 2 个文件作为例子:

JavaScript

// index.js import {hello, bye} from './util' let result1 = hello() let result2 = bye() console.log(result1)

1
2
3
4
5
6
7
// index.js
import {hello, bye} from './util'
 
let result1 = hello()
let result2 = bye()
 
console.log(result1)

JavaScript

// util.js export function hello () { return 'hello' } export function bye () { return 'bye' }

1
2
3
4
5
6
7
8
// util.js
export function hello () {
  return 'hello'
}
 
export function bye () {
  return 'bye'
}

在开启了 concatenateModule 功能后,打包出来的代码如下:

图片 8

首先,bye() 方法的调用和本体都被消除了。

其次,hello() 方法的调用和定义被合成到了一起,变成直接 console.log('hello')

第三就是这个功能原有的目的:代码量减少了。

这个功能的本意是把所有模块最终输出到同一个方法内部,从而把调用和定义合并到一起。这样像 bye() 这样没有副作用的方法就可以在合并之后被轻易识别出来,并加以删除。有关这个功能更加详细的介绍可以看这篇文章

destructuring

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

看下面的例子:

let cat='ken';

let dog ='lili';

let zoo = {cat:cat,dog:dog};

console.log(zoo);  //Object {cat:"ken",dog:"lili"}

用ES6完全可以像下面这么写:

let cat='ken';

let dog ='lili';

let zoo = {cat, dog};

console.log(zoo);  //Object {cat:"ken",dog:"lili"}

反过来可以这么写:

letdog = {type: 'animal',many: 2};

let {type,many} = dog;

console.log(type,many);   //animal2

总结

  1. 使用 ES6 模块语法编写代码
  2. 工具类函数尽量以单独的形式输出,不要集中成一个对象或者类
  3. 声明 sideEffects
  4. 自己在重构代码时也要注意副作用

    1 赞 1 收藏 评论

图片 9

default, rest

default很简单,意思就是默认值。大家可以看下面的例子,调用animal()方法时忘了传参数,传统的做法就是加上这一句type = type || 'cat' 来指定默认值。

function animal(type) { 

    type = type|| 'cat';

    console.log(type);

}

animal();

如果用ES6我们而已直接这么写:

function animal(type='cat'){

    console.log(type);

};

animal();

最后一个rest语法也很简单,直接看例子:

function animals(...types) { 

    console.log(types);

}

animals('cat','dog','fish');// ["cat", "dog", "fish"]

而如果不用ES6的话,我们则得使用ES5的arguments。

import  export

这两个家伙对应的就是es6自己的module功能。

我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小工程,再用一种简单的方法把这些小工程连接在一起。

这有可能导致两个问题:

1、一方面js代码变得很臃肿,难以维护。

2、另一方面我们常常得很注意每个script标签在html中的位置,因为它们通常有依赖关系,顺序错了可能就会出bug。

在es6之前为解决上面提到的问题,我们得利用第三方提供的一些方案,主要有两种CommonJS(服务器端)和AMD(浏览器端,如require.js)。

如果想了解更多AMD,尤其是require.js,可以参看这个教程:why modules on the web are useful and the mechanisms that can be used on the web today to enable them

而现在我们有了es6的module功能,它实现非常简单,可以成为服务器和浏览器通用的模块解决方案。

ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块,都只能在运行时确定这些东西。

代码如下:

传统的写法

首先我们回顾下 require.js 的写法。假设我们有两个js文件: index.js 和 content.js,现在我们想要在index.js 中使用 content.js 返回的结果,我们要怎么做呢?

首先定义:

//content.js

define('content.js', function() {

    return 'A cat';

});

然后require:

//index.js 

require(['./content.js'], function(animal) {

    console.log(animal);  //A cat

});

那CommonJS是怎么写的呢?

// index.js

var animal = require('./content.js');

//content.js

module.exports = 'A cat';

ES6的写法

// index.js

import animal from './content';  

// content.js

export default 'A cat';

以上我把三者都列出来了,妈妈再也不用担心我写混淆了...

ES6 module的其他高级用法

//content.js

export default 'A cat';

export function say(){ 

    return 'Hello!'

}

export const type = 'dog';

上面可以看出,export命令除了输出变量,还可以输出函数,甚至是类(react的模块基本都是输出类)

//index.js

import { say,type} from './content';

let says = say();

console.log(`The ${type} says ${says}`);// The dog says Hello

这里输入的时候要注意:大括号里面的变量名,必须与被导入模块(content.js)对外接口的名称相同。

如果还希望输入content.js中输出的默认值(default), 可以写在大括号外面。

//index.js

import animal, { say,type} from './content';

let says = say();

console.log(`The ${type} says ${says} to ${animal}`);//The dog says Hello to A cat

修改变量名

此时我们不喜欢type这个变量名,因为它有可能重名,所以我们需要修改一下它的变量名。在es6中可以用as实现一键换名。

//index.js

import animal, { say, type as animalType } from './content';

let says = say();

console.log(`The ${animalType} says ${says} to ${animal}`);//The dog says Hello to A cat

模块的整体加载

除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。

//index.js 

import animal, *as content from'./content';

let says = content.say();

console.log(`The ${content.type} says ${says} to ${animal}`);//The dog says Hello to A cat

通常星号*结合as一起使用比较合适。

终极秘籍

考虑下面的场景:上面的 content.js 一共输出了三个变量(default, say, type),假如我们的实际项目当中只需要用到 type 这一个变量,其余两个我们暂时不需要。我们可以只输入一个变量:

import { type } from './content';

由于其他两个变量没有被使用,我们希望代码打包的时候也忽略它们,抛弃它们,这样在大项目中可以显著减少文件的体积。

ES6帮我们实现了!

不过,目前无论是webpack还是browserify都还不支持这一功能...

如果你现在就想实现这一功能的话,可以尝试使用rollup.js

他们把这个功能叫做Tree-shaking,意思就是打包前让整个文档树抖一抖,把那些并未被依赖或使用的东西统统抖落下去。

看看他们官方的解释吧:

Normally if you require a module, you import the whole thing. ES2015 lets you just import the bits you need, without mucking around with custom builds. It's a revolution in how we use libraries in JavaScript, and it's happening right now.

结尾附上阮一峰老师的博客地址:ECMAScript 6 入门

本文由IT-综合发布,转载请注明来源:ES2016宗旨内容