JS - 模块

参考博客：module.exports、exports模块化导入导出方式，Module 的语法

module.exports / require

在node环境JS文件中，module.exports指向的对象最终被当作模块导出，在其他文件通过require导入

module.exports是一个对象的引用，可直接赋值

// util.js
module.export.a = 1
module.export.foo = function() {
  console.log('foo')
}

var a = 1
function foo() {
  console.log('foo')
}
module.exports.a = a
module.exports.foo = foo

require导入

// other file
const util = require('./util.js') // util: {a: 1, foo: function(){...}}

也可以整体导出

var a = 1
function foo() {
  console.log('foo')
}
// es6语法，对象赋值时key与value名字相同时，可省略value
module.exports = {
  a,
  foo
}

注意：整体导出时，是赋予module.export一个新的对象引用，之前添加的属性都会消失

var a = 1
function foo() {
  console.log('foo')
}
module.exports.a = a
module.exports.foo = foo

module.exports = {
  b: 2
}
// module.exports指向了新的对象，最终输出：{c: 3}
module.exports = {
  c: 3
}

exports

exports与module.exports相等，它们都指向同一个对象。在exports上赋值，相当于在module.exports上赋值

exports.a = 1
exports.foo = function() {
  console.log('module.exports === exports: ', module.exports === exports) // true
}
// module.exports可以一起使用，但通常使用其中一种即可
module.exports.b = 2

var a = 1
function foo() {
  console.log('module.exports === exports: ', module.exports === exports) // true
}
exports.a = a
exports.foo = foo

需要注意的是，exports直接赋值对象是不会被导出的，exports与module.exports指向相同的对象，为exports赋值对象（exports指向了新的对象），而最终被导出的是module.exports指向的对象

module.exports.a = 1 // 最终输出：{b: 2}

exports = {
  b: 2
}

export / import

export、import是ES6中模块化功能，实现模块的导出与导入，通用与服务器与浏览器

ES6出现之前，JS 没有模块体系，无法将大型程序拆分成小的文件，所以出现社区定制的模块加载方案，CommonJS（用于服务器）与 AMD（用于浏览器）

ES6 与 CommonJS & AMD 的比较

ES6 编译时就能确定模块的关系，而 CommonJS 与 AMD 只能运行时才能确定

// CommonJS
var { stat, exists, readFile } = require('fs');

// 等同于
var _fs = require('fs');
var stat = _fs.stat;
var exists = _fs.exists;
var readfile = _fs.readfile;

实际上是引入整个 fs 模块（加载fs模块中所有的函数），生成一个对象，在从这个对象中读取三个方法

// ES6模块
import { stat, exists, readFile } from 'fs';

ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。上面代码的实质是从fs模块加载 3 个方法，其他方法不加载，这种加载称为“编译时加载”或者静态加载。
即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。

 

export命令后是一个变量（声明 & 赋值），或者用大括号指定所要输出的一组变量

// util.js
export var a = 1
export function foo() {}

var a = 1
function foo() {}

export {
  a,
  foo
}

错误的导出

// 报错
export 1;

// 报错
var m = 1;
export m;  

// 报错
export {
  m: 1
}

// 报错
var m = 1
var obj = {
  m
}
export obj

import 引入变量，变量是只读的

// 逐一加载
import { a, foo } from './util.js';

console.log(a)
foo()

// 整体加载
import * as util from './util.js';

console.log(util.a)
util.foo()

export default

export导出时，必须带一个变量名或者函数名，export default 可以省略变量名或者函数名

在一个文件中，export default 只能使用一次

// 导出 匿名函数
export default function() {
  console.log('foo');
}

// 导入，使用 export default 输出时，import 并不需要使用大括号"{}"，自定义接收的变量名
import func from './util.js';

func() // 'foo'

// 导出 非匿名函数
export default function foo() {
  console.log('foo');
}

// 导入。导入时，同样需要自定义变量名（也可以为foo）
import func from './util.js';

func() // 'foo'

function foo() {
  console.log('foo')
}

// 导出foo()
export default foo()

// 引入之后直接执行
import func from './util.js'; // 控制台输出：'foo'

// MyClass.js，导出类
export default class { ... }

// main.js
import MyClass from 'MyClass';
let o = new MyClass();

错误的export default导出

// 错误：Only expressions, functions or classes are allowed as the `default` export.
export default var a = 1;

// 报错
export 42;

// 正确
var a = 1;
export default a;

// 正确
export default 42;