在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

在 JavaScript ES6 中，export 与 export default 均可用于导出常量、函数、文件、模块等。

export 命令

模块功能主要由两个命令构成：export 和 import。export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。
一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。

下面是一个 js 文件，里面使用 export 命令来输出变量，函数或类（class）

1
2
3
4
5
6
7
8
// a.js
export const str = 'export 的内容'
export const year = 2022

export function message(sth) {
  return sth
}

除了上述的写法，还有一种推荐使用的，因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

1
2
3
4
5
6
7
8
9
// a.js
const str = 'export 的内容'
const year = 2022

function message(sth) {
  return sth
}

export { str, year, message }

通常情况下，export 输出的变量就是本来的名字，但是可以使用 as 关键字重命名。

1
2
3
4
5
6
7
8
9
10
11
12
// a.js
const str = 'export 的内容'
const year = 2022
function message(sth) {
  return sth
}

export {
  str as newname1,
  year as newname2,
  message as newname3
}

上面代码使用as关键字，重命名了变量 str 和 year，以及函数 message 的对外接口。

import 命令

使用 export 命令定义了模块的对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块。

import 命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（a.js）对外接口的名称相同。

1
2
// b.js
import { str, year, message } from './a';

上面代码的 import 命令，用于加载 a.js 文件, 引入后便可以在 b.js 文件中使用 a.js 文件中的变量、函数或类等。

如果想为输入的变量重新取一个名字，import 命令要使用 as 关键字，将输入的变量重命名。

1
2
3
4
5
6
// b.js
import {
  str as newname1,
  year as newname2,
  message as newname3
} from './a'

import 后面的 from 指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js 后缀可以省略。
如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。

1
2
3
4
5
// import 引入一个依赖包，不需要相对路径。
import axios from 'axios'

// import 引入一个自己写的 js 文件，是需要相对路径的。
import AppService from './appService'

export default 命令

export default 命令用于指定模块的默认输出。

显然，一个模块只能有一个默认输出，因此 export default 命令只能使用一次。所以，import 命令后面才不用加大括号，因为只可能唯一对应 export default命令。一个文件内不能有多个 export default。

1
2
3
// a.js
const str = 'export default的内容'
export default str

在另一个文件中的导入方式：

1
2
3
// b.js
// 导入的时候没有花括号, 可以起任意名称
import StrFile from 'a'

简述区别

  • export 与 export default 均可用于导出常量、函数、文件、模块等；
  • 在一个文件或模块中，export、import 可以有多个，export default 仅有一个；
  • 通过 export 方式导出，在导入时要加 { }，export default 则不需要，并可以起任意名称；
  • 输出单个值，使用 export default，输出多个值，使用 export；
  • export default 与普通的 export 不要同时使用；