虽然Node.js从诞生起就支持模块，但JavaScript语言本身长期以来却一直没有模块功能，只能由CommonJS或其他AMD等模块系统来“模拟”。

随着ES 6标准的推出，JavaScript语言本身终于也迎来了原生内置的模块支持，称为ECMAScript Modules（简称ESM），不仅可以直接在浏览器中使用模块，也可以在Node.js中使用ESM模块。

不使用ESM模块时，我们用module.exports导出可供外部使用的JS对象，例如，以下模块导出了两个函数：

  1. 'use strict';
  2. let s = 'Hello';
  4. function out(prompt, name) {
  5.     console.log(`${prompt}, ${name}!`);
  6. }
  8. function greet(name) {
  9.     out(s, name);
  10. }
  12. function hi(name) {
  13.     out('Hi', name);
  14. }
  16. module.exports = {
  17.     greet: greet,
  18.     hi: hi
  19. };

要把上述代码改为ESM模块，我们用export标识需要导出的函数：

  1. let s = 'Hello';
  3. // out是模块内部函数，模块外部不可见:
  4. function out(prompt, name) {
  5.     console.log(`${prompt}, ${name}!`);
  6. }
  8. // greet是导出函数，可被外部调用:
  9. export function greet(name) {
  10.     out(s, name);
  11. }
  13. // hi是导出函数，可被外部调用:
  14. export function hi(name) {
  15.     out('Hi', name);
  16. }

并将其保存为hello.mjs文件，注意扩展名不是.js，而是.mjs。

可以再编写一个main.mjs文件来调用hello模块：

  1. import { greet, hi } from './hello.mjs';
  3. let name = 'Bob';
  4. greet(name);
  5. hi(name);

可见，ESM模块用export关键字导出一个JS对象，用import关键字导入一个模块的导出对象。

如果要实现类似如下代码的单个函数导出：

  1. module.exports = greet;

则可以用export default导出：

  1. export default function greet(name) {
  2.     ...
  3. }

相应的，导入代码修改为：

  1. import greet from './hello.mjs';

细心的同学还注意到ESM模块文件第一行并没有'use strict'，这是因为ESM模块默认启用严格模式，因此无需再手动声明'use strict'。

浏览器加载ESM

对于浏览器来说，也可以直接使用ESM模块。当我们加载一个ESM模块时，需要用type="module"来表示：

  1. <html>
  2. <head>
  3.     <script type="module" src="./example.js"></script>
  4.     <script type="module">
  5.         greet('Bob');
  6.     </script>
  7. </head>
  8. ...
  9. </html>

或者直接使用import加载一个模块：

  1. <html>
  2. <head>
  3.     <script type="module">
  4.         import { greet } from './example.js';
  5.         greet('Bob');
  6.     </script>
  7. </head>
  8. ...
  9. </html>

练习

在Node环境中使用ESM模块：

下载练习

小结

使用JavaScript内置的原生模块时，用关键字export和import来实现导出与导入；

ESM模块默认启用strict模式，无需声明'use strict'。