export default 命令

为模块指定默认输出

export default 和具名导出的关键区别在于：具名导出的是「绑定」，导入时名字必须对得上；默认导出实际上只是导出了一个名为 default 的特殊绑定，导入方可以随便起名。所以 import customName from './x.js' 里的 customName 完全由使用者决定，这也是为什么一个模块只能有一个 export default——default 这个名字只有一个。

理解了这层等价关系，就知道 import x from './m' 其实是 import { default as x } from './m' 的语法糖，两种写法可以混用。反过来在导出侧，export { foo as default } 和 export default foo 也是等价的。下面这组代码把这几种等价写法都摆出来验证。

示例

这是入口页面。三行 import 演示了默认导入的等价写法：第一行是常规语法糖，中间注释掉的那行说明不能直接 import { default }（default 是保留字，不能当变量名），第三行用 as 重命名后就合法了。两个不同的名字指向的是同一个函数，所以 customName() 和 mytest() 打印的内容一样。

注意 script 标签必须写 type="module"，否则浏览器不会按模块处理，import 会直接报语法错误。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script type="module">
      import customName from './export-default.js';
      // import { default } from './export-default.js'
      import { default as mytest } from './export-default.js';

      customName();
      mytest();
    </script>
  </body>
</html>

export-default.js 文件

被导入的模块，注释里列了三种等价的默认导出写法：直接 export default testOne、导出时就地声明函数、以及 export { testOne as default }（当前生效的是这种）。三种效果完全一致，导入方感知不到区别。

模块里定义了 test 和 testOne 两个函数，但只有 testOne 被导出，test 外部拿不到——模块作用域默认是封闭的，没显式导出的东西不会泄漏出去。

function test() {
  console.log('test');
}

function testOne() {
  console.log('testOne');
}

// 第一种写法
// export default testOne

// 第二种写法
// export default function testOne () {
// 	console.log('testOne');
// }

// 第三种写法
export { testOne as default };