ES6 的模块系统

　　原文地址：https://hacks.mozilla.org/2015/08/es6-in-depth-modules/

　　ES6 是 ECMAScript 第 6 版本的简称，这是新一代的 JavaScript 的标准。ES6 in Depth 是关于 ES6 的一系列新特性的介绍。

　　ES6 是 ECMAScript 第 6 版本的简称，这是新一代的 JavaScript 的标准。ES6 in Depth 是关于 ES6 的一系列新特性的介绍。

　　遥想 2007 年，笔者开始在 Mozilla 的 JavaScript 团队工作的时候，那个时候典型的 JavaScript 程序只有一行代码。

　　两年之后， Google Map 被发布。但是在那之前不久，JavaScript 的主要用途还是表单验证，当然啦，你的<input onchange=>处理器平均来说只有一行。

　　事过情迁，JavaScript 项目已经变得十分庞大，社区也发展出了一些有助于开发可扩展程序的工具。首先你需要的便是模块系统。模块系统让你得以将你的工作分散在不同的文件和目录中，让它们之前得以互相访问，并且可以非常有效地加载它们。自然而然地，JavaScript 发展出了模块系统，事实上是多个模块系统（AMD，CommonJS，CMD，译者注）。不仅如此，社区还提供了包管理工具（NPM，译者注），让你可以安装和拷贝高度依赖其他模块的软件。也许你会觉得，带有模块特性的 ES6，来得有些晚了。

模块基础

一个 ES6 的模块是一个包含了 JS 代码的文件。ES6 里没有所谓的 module 关键字。一个模块看起来就和一个普通的脚本文件一样，除了以下两个区别：

• ES6 的模块自动开启严格模式，即使你没有写 'use strict'。

• 你可以在模块中使用 import 和 export.

　　导出export 分为命名导入和默认导出

　　命名导入

　　让我们先来看看 export。在模块中声明的任何东西都是默认私有的，如果你想对其他模块 Public，你必须 export 那部分代码。我们有几种实现方法，最简单的方式是添加一个 export 关键字。

// kittydar.js - Find the locations of all the cats in an image.
// (Heather Arthur wrote this library for real)
// (but she didn't use modules, because it was 2013)

export function detectCats(canvas, options) {
  var kittydar = new Kittydar(options);
  return kittydar.detectCats(canvas);
}

export class Kittydar {
  ... several methods doing image processing ...
}

// This helper function isn't exported.
function resizeCanvas() {
  ...
}
...

　　通过export导出的形式，文件utility.js：

function generateRandom() {
    return Math.random();
}

function sum(a, b) {
    return a + b;
}

export { generateRandom, sum }

//关键词export 导出了这两个函数, 你可以看到, 这两个导出的函数是使用花括号进行包围, 并且他们使用逗号进行隔开.
你也可以使用下面的方式对导出的内容进行重命名.
export {generateRandom as random, sum as doSum}

　　下面我们再来看看如何在其他的模块中是哟了那个这些导出的值.

　　app.js

import { generateRandom, sum } from'utility';

console.log(generateRandom());//logs a random number
console.log(sum(1, 2));//3

　　注意第一行. 它将从utility模块中导入值. 当然, 如果你只想导出一个值(例如sum), 你可以使用下面的方式:

import { generateRandom, sum } from'utility';

　　同样, 你也可以将整个模块当作一个对象导入, 然后引用的时候, 使用对象属性的方法. 所以我们可以使用下面的方式:

import 'utility' as utils;

console.log(utils.generateRandom());//logs a random number
console.log(utils.sum(1, 2));//3

　　默认导出　　

　　"默认导出"和"重导出"(Default Exports and Re-exporting)，如果你只想从一个模块中导出一个值, 可以使用默认导出. 为了演示默认导出的用法, 我们需要修改utility.js

var utils = {
  generateRandom:function() {
    return Math.random();
  },
  sum:function(a, b) {
    return a + b;
  }
};

export default utils;

　　最后一行将utils 这个变量进行导出. 而在另外一个模块中, 引用方法如下:

　　app.js

import utils from'utility';

console.log(utils.generateRandom());//logs a random number
console.log(utils.sum(1, 2));//3
export default utils; //exports the imported value

　　第一行代码首先将utils对象进行导入, 你也可以同样可以将其重新导出.如最后一行

默认导出　　

　　资料来源：

　　ES6 的模块系统

　　理解ES6的Modules