模块语法

CommonJs

导出

使用 module.exports 或 exports. 的导出

// 写法一
const a = 1;
module.exports = {
  a
}

// 写法二
exports.a = 1;

万分注意！！！exports 是 module.exports 的一个引用

1. 直接改变 exports 这个变量的地址，会导致 exports 上的东西全都不输出

// foo.js
exports = {}
exports.a = 1;

// main.js
const foo = require('./foo.js')
console.log(foo.a) // undefined

2. module.exports 和 exports. 不能共用，因为最终最终只会输出 module.exports 的值

导入

使用 require 进行导入，是一个动态且同步的导入方式

const foo = require('./foo.js);

if (1 > 0) {
	const foo = require('./foo.js') // 动态导入
}

AMD

是用在 浏览器端，异步加载模块的定义

// id 为 moduleA 的模块定义，依赖 moduleB
define('moduleA', ['moduleB'], function (moduleB) {
  return {
    foo: moduleB.foo();
  }
})

也支持 require/exports 写法，这种写法可以实现动态导入

define('moduleA', ['require', 'exports'], function(require, exports) {
  let foo = null;
  if (1 > 0) {
    foo = require('moduleB').foo();
  }
  exports.foo = foo;
})

ES6 Module

ES6 模块自动采用严格模式

导出

使用 export 输出模块内部的变量

输出命名变量，可以通过 as 关键字重命名

// 写法一
export const a = 1;

// 写法二
const a = 1;
export { a };

// 写法三
const b = 1;
export { b as a };

输出默认变量，可以通过把某个变量重命名为 default ，令其变为默认变量

// 写法一
export default 1;

// 写法二
const a = 1;
export { a as default };

输出的只是与对应变量动态绑定的关系。即可以实时的获取到模块内部的值

export let foo = 'bar';
setTimeout(() => foo = 'baz', 500);

输出变量 foo，值为 bar，500 毫秒后变为 baz

导入

使用 import 引入其他模块内部的变量

同一个模块只会在第一次 import 时加载，后面再次 import，不会再重新执行

可通过 {} 引入命名变量，可以通过 as 关键字重命名

import { a } from 'xx.js'

import { a as b } from 'xx.js'

可直接引入默认变量

import a from 'xx.js'

可只加载模块，不导入变量

import 'lodash';

可整体加载，使用 * 指定一个对象，所有输出值都会加载到这个对象上

import * as foo from 'xx.js'

import 是静态执行的，不能使用表达式和变量，所以以下写法都会报错

import { 'f' + 'oo' } from 'xx.js'

if (1 > 1) {
  	import { foo } from 'xx.js'
}

export 与 import 复合写法

在一个模块中，先输入后输出同一个模块，则可以写在一起

export { foo, bar } from 'xx.js'

// 作用等同于
import { foo, bar } from 'xx.js'
export { foo, bar }

但 foo 和 bar 没有导入当前模块，只是相当于一个中转站

动态导入 import()

import 是静态导入，利于编译器分析，但也导致无法在运行时加载

但 import() 是动态导入，会异步导入（require 也是动态导入，但其是同步导入），并输出一个 promise

const a = 'lodash';
if (1 > 0) {
  import(`./xx/${a}.js`)
  	.then(module => /*...*/);
}