JavaScript模块化简述

做为一个前端工程师，咱们在项目中常常看到下面这样的代码：

import {JSEncrypt} from 'jsencrypt';  
import formatDate from '@/const/filter';  
export const merchants = `${basicUrl}/merchants`;

const path \= require('path');  
module.exports \= {};

大部分人可能都大概了解以上代码的意思是 导入（引用） or 导出一些代码块。可是你们有没有想过，一样是导入、导出功能，为何一个项目中经常能同时看到import和 require呢？他们又有什么区别的呢？
要回答这些问题，咱们首先要对JavaScript模块化有一个大致的了解。阮一峰老师的JavaScript模块化编程系列文章对JavaScript模块化的起源和目前主流的模块化规范都作了介绍，建议你们先去了解这部份内容。

模块化规范

随着网页的功能愈来愈丰富，JavaScript代码的开发工做量确定会愈来愈多。用最原始的方法，把全部不一样功能的js代码放在一个文件内管理是不现实的。为了方便咱们专一开发业务代码，引用一些库或者组件也是咱们在平常开发中常常遇到的事情。在这个背景下，JavaScript模块化编程应运而生。
实现特定功能的代码组合在一块儿，就是一个模块。
在ES6以前，主流的模块化规范有CommonJS和AMD。CommonJS是服务端的规范，AMD是浏览器端的规范。之因此要做服务端和浏览器端的区分，是有缘由的。

CommonJS规范

Node.js的模块化系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。

const path \= require('path');
function resolve(dir) {
 return path.join(\_\_dirname, dir);
}

像上面这样，加载模块后，就能够直接调用模块的方法。下面简单介绍CommonJS规范语法。

CommonJS规范语法

Node应用由模块组成，采用CommonJS模块规范。
根据这个规范，每一个文件就是一个模块，有本身的做用域。在一个文件里面定义的变量、函数、类，都是私有的，对其余文件不可见。

// example.js
var x = 5;
var addX = function (value) {
  return value + x;
}

上面代码中，变量x和函数addX，是当前文件example.js私有的，其余文件不可见。
若是想在多个文件分享变量，必须定义为global对象的属性。

global.warning \= true;

上面代码的warning变量，能够被全部文件读取。固然，这样的写法是不推荐的。
CommonJS规范规定，每一个模块内部，module变量表明当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实就是加载该模块的module.exports属性。

//example.js
var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

require 方法用于加载模块。

var example = require('./example.js');

console.log(example.x); // 5
console.log(example.addX(1)); // 6

CommonJS模块的特色以下。

> 全部代码都运行在模块做用域，不会污染全局做用域。
> 模块能够屡次加载，可是只会在第一次加载时运行一次，而后运行结果就被缓存了，之后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
> 模块加载的顺序，按照其在代码中出现的顺序。

module对象

Node内部提供一个Module构件函数。全部模块都是Module的实例。

function Module(id, parent) {
  this.id = id;
  this.exports = {};
  this.parent = parent;
  //...
}

每一个模块内部，都有一个module 对象，表明当前模块。它有如下属性。

> module.id 模块的识别符，一般是带有绝对路径的模块文件名。
> module.filename 模块的文件名，带有绝对路径。
> module.loaded 返回一个布尔值，表示模块是否已经完成加载。
> module.parent 返回一个对象，表示调用该模块的模块。
> module.children 返回一个数组，表示该模块要用到的其余模块。
> module.exports 表示模块对外输出的值。

Module.exports属性

module.exports属性表示当前模块对外输出的接口，其余文件加载该模块，实际上就是读取module.exports变量。

exports变量

为了方便，Node为每一个模块提供了一个exports变量，指向module.exports，这等同在每一个模块头部，有一行这样的命令。

var exports = module.exports;

形成的结果是，在对外输出模块接口时，能够向exports对象添加方法。

exports.area = function (r) {
  return Math.PI * r * r;
};

exports.circumference = function (r) {
  return 2 * Math.PI * r;
};

exports变量

为了方便，Node为每一个模块提供了一个exports变量，指向module.exports，这等同在每一个模块头部，有一行这样的命令。

var exports = module.exports;

形成的结果是，在对外输出模块接口时，能够向exports对象添加方法。

exports.area = function (r) {
  return Math.PI * r * r;
};

exports.circumference = function (r) {
  return 2 * Math.PI * r;
};

注意，不能直接将exports变量指向一个值，由于这样等于切断了exports与module.exports的联系。

exports = function (x) {
  console.log(x);
};

上面的写法是无效的，由于exports再也不指向 module.exports了。

下面的写法也是无效的。

exports.hello = function () {
  return 'hello';
};
module.exports = 'hello world';

上面代码中，hello函数是没法对外输出的，由于modules.exports被从新赋值了。
为了不混淆，推荐只用module.exports。

require命令

Node使用CommonJS模块规范，内置的require命令用于加载模块文件。

require命令的基本功能是，读入并执行一个JavaScript文件，而后返回该模块的exports对象。若是没有发现指定模块，会报错。

// example.js
const sayHello = function () {
  console.log('hello world');
}
module.exports = sayHello;

// main.js
const sayHello = require('./example.js');
sayhello(); //hello world

可是CommonJS规范不适用于浏览器端。

在上面代码中，sayHello方法再在第一行require('./example.js');以后运行，所以必须等example.js加载完成。也就是说，若是加载时间很长，整个应用就会停在那里等，形成浏览器假死现象。

这对服务器来讲不是问题，由于全部的模块都存放在本地硬盘，能够同步加载完成，等待时间就是硬盘的读取时间。但对浏览器来讲就是一个大问题，由于模块都放在服务器端，等待时间取决于网速的快慢，这可能会形成很是差的用户体验。AMD规范给浏览器端提供了模块化解决方案。

AMD规范

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。全部依赖这个模块的语句，都定义在一个回调函数中，等到加载完成以后，这个回调函数才会运行。

AMD也采用require()语句加载模块，可是不一样于CommonJS，它要求两个参数：

require([module], callback);

module是须要加载的模块，callback是模块加载完成执行的回调函数。因为模块的加载和回调函数的执行是不一样步的，因此浏览器等待的时间不会太长。

module

module是ES6在推出的模块规范。前面提到的CommonJS服务于服务器，AMD服务于浏览器，而ES6的实现的模块功能是在语言层面上实现的，是浏览器和服务器通用的模块解决方案。

Export 命令

摘抄自阮一峰老师的ECMAScript 6 入门 Module的语法一节（有删改）：

模块功能主要由两个命令构成： export和 import。 export命令用于规定模块的对外接口， import命令用于输入其余模块提供的功能。
一个模块就是一个独立文件。该文件内部的全部变量、方法（即函数），外部没法获取。若是你但愿外部可以读取模块内部的某个变量，就必须使用 export关键字输出该 变量 。注意，要导出的是 变量 or 方法。
须要特别注意的是， export命令规定的是对外的接口，必须与模块内部的变量创建一一对应关系。

我一开始不理解，查阅了一些资料，节选自MDN:

There are two types of exports:

1. Named Exports (Zero or more exports per module)
2. Default Exports (One per module)

Identifier to be exported (so that it can be imported via import in another script).
拙劣的翻译：要导出的是有标识符的变量（以便其余模块经过 import 语句进行导入）。

如今再分别看一下报错和正确的语法。

// export 一个常量1，报错
export 1；

// 表面上看起来是定义了一个名为m变量1，实际上导出的是m的值1
// 想象一下，在其余文件import的时候，找不到对应的入口，报错
var m = 1;
export m;

// 直接导出一个变量 m，正确
export var m = 1;

// 先定义一个变量m，再将变量m导出，正确
var m = 1;
export { m };

// 先定义一个变量n，再把n看成m导出
// 这样其余文件import {m} 就能找到这里对应的n
var n = 1;
export {n as m};

为何要强调导出变量 or 方法呢？比如咱们出去买便当，加入我点了一个手撕鸡+白饭+青菜，若是店家不用饭盒把食物装起来给我，那我付钱以后，难道要徒手拿店家准备好的食物吗？MDN提到的Named Exports和饭盒同样，都是起到载体、装载的做用，导出的是变量 or 方法，其余模块在导入的时候才会有迹可寻。

import命令

使用export定义了变量和方法之后，其余模块就能够经过import命令加载这个模块的内容。

// export.js
var m = 1;
export { m };

// import.js
import { m } from './export.js';
console.log(m); // 1

import命令输入的变量是只读的。但若是import的变量是一个对象，这个对象的属性是能够修改的（可是不建议这样作，很差查错）。
能够结合as关键字给import的变量重命名：

// import.js
import { n as m } from './export.js';
console.log(n); // 1

模块的总体加载

能够用* 指定一个对象，总体加载一个模块。全部输出值都加载在这个对象上面。

// export.js
var m = 1;
var n = 2
export { m, n };

import * as test from './export.js';
console.log(test.m); // 1
console.log(test.n); // 2

export default命令

export default命令为特定模块指定默认输出。这样，其余模块不用知道名称的状况下就能够加载该模块。

// export-default.js
function foo () {
    console.log('export default');
}
export default foo;

// import.js
// foo能够取任意命名
import foo from './export-default.js';

foo();// export default

在一个模块内，exoprt default命令只能使用一次。

结语

了解过上面的知识，咱们应该不难知道，module.exports & require、export & import 都是导出 or 导入 模块内容的写法，都属于JavaScript模块规范的一种。module.exports & require是CommonJS和AMD模块规范，是ES6的module模块规范。

Node.js有它本身的 CommonJS 模块格式，与 ES6 模块格式是不兼容的。目前的解决方案是，将二者分开，ES6 模块和 CommonJS 采用各自的加载方案。

若是咱们更细心一点，应该就会发现，在前端工程化已是主流趋势的今天，在前端项目中，用到module.exports & require的地方大都是webpack相关的配置文件，由于webpack是npm生态中的一个模块。webpack的运行依赖于node环境。而在平常开发中运用ES6新特性，能够说是每个前端工程师的必备技能，在因此业务代码中export & import 随处可见。

参考连接

阮一峰ECMAScript 6 入门
JavaScript 标准参考教程（alpha）
JavaScript模块化编程
MDN