import和export的用法

问题来了

在日常开发中，经常会遇到以下这些语句

import {xxx, xxxx} from 'xxx'
import xxx from 'xxx'
import('../xxx')

let xxx = 'x'; export {xxx}
export class xxx {}
export default {}
exports.post()
module.exports.init = init;

那么问题来了，这些import和export语句表示什么意思？有什么区别呢？

背景知识

1. ES6模块

import和export是ES6模块中的两个命令。

ES6模块功能主要有两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

在ES6前，模块加载最主要的有 CommonJS 和 AMD两种。前者用于服务器，后者用于浏览器。
ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

2. export

export命令用于规定模块的对外接口。即输出模块内部变量（方法、类）。

• 基本用法

// 1. 直接输出变量（方法、类）
export var m = 1;
export function multiply(x, y) {
  return x * y;
};

// 2. 使用大括号指定所要输出的一组变量（方法、类）
var m = 1;
export { m };

// 3. as关键字重命名
// 重命名后，v2可以用不同的名字输出两次
function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

• 注意项

1. export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
2. export命令可以出现在模块的任何位置，只要处于模块顶层就可以。

3. import

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。

• 基本用法

// 1. 引入变量（方法、类）-（逐一加载）
import { firstName, lastName, year } from './profile.js';

// 2. as关键字重命名
import { lastName as surname } from './profile.js';

// 3. 整体加载
import * as circle from './circle';

• 注意项

1. 引入变量只读，引入对象属性可改写
2. from后面是文件路径（相对路径、绝对路径均可，可省略.js猴嘴；模块名，已配置模块位置）
3. import命令提升至顶部先执行（编译阶段执行）
4. import命令静态执行，不能使用表达式和变量
5. 重复执行同一句import命令，只会执行一次

4. export default

export default就是输出一个叫做default的变量或方法，系统允许自定义命名

• 基本用法

// 默认输出一个函数
export default function () {
  console.log('foo');
}
// 引用并指定名字
import customName from './export-default';

export default命令的本质是将后面的值，赋给default变量，所以可以直接将一个值写在export default之后

5. import()

为了实现在运行中加载模块，引入了import()函数，实现了动态加载。

• 基本用法

import('./myModule.js')
.then(({export1, export2}) => {
  // ...
});

• 其他

import()和import主要区别为前者是动态加载。
import()返回一个Promise对象，import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。
import()类似于Node的require方法，区别主要是前者是异步加载，后者是同步加载
import()通常用于按需加载、条件加载、动态的模块路径

问题解答

// 1. 
// 引入模块的某些变量（方法、类），配合4、5使用
import {xxx, xxxx} from 'xxx'  

// 2. 
// 引入模块的默认变量（方法、类），配合6使用
import xxx from 'xxx' 

// 3.
// 实现动态加载，适用于按需加载等
import('../xxx') 

// 4.
// 输出模块的变量（方法、类），对应引入方法为1
let xxx = 'x'; export {xxx}
// 5.
// 输出模块的变量（方法、类），对应引入方法为1
export class xxx {}
// 6.
// 输出模块默认的变量（方法、类），对应引入方法为2
export default {}
// 7.
// 待更新
exports.post()
// 8.
// 待更新
module.exports.init = init;

参考文章

《ECMAScript 6 入门——阮一峰》