ES6 模块以及如何在 JavaScript 中使用导入和导出功能

与 ES2015 (ES6) 搭配的 JavaScript 内置支持模块. 与 CommonJS 一样,每个文件都是自己的模块. 让对象,函数,类或变量可用于外部世界,就像出口它们,然后在其他文件中导入它们。

出口

您可以逐一导出会员,而未导出会员将不会直接在模块之外可用:

 1export const myNumbers = [1, 2, 3, 4];
 2const animals = ['Panda', 'Bear', 'Eagle']; // Not available directly outside the module
 3
 4export function myLogger() {
 5  console.log(myNumbers, animals);
 6}
 7
 8export class Alligator {
 9   constructor() {
10     // ...
11   }
12}

或者,您可以将所需的成员导出到单个语句中,在模块的末尾:

1export { myNumbers, myLogger, Alligator };

通过Alias导出

您还可以给导出成员一个副名称,用作为关键字:

1export { myNumbers, myLogger as Logger, Alligator }

缺口出口

您可以用默认关键字定义默认导出:

 1export const myNumbers = [1, 2, 3, 4];
 2const animals = ['Panda', 'Bear', 'Eagle'];
 3
 4export default function myLogger() {
 5  console.log(myNumbers, pets);
 6}
 7
 8export class Alligator {
 9  constructor() {
10    // ...
11  }
12}

进口

导入也是非常简单的,导入关键字,会员要导入弯曲的支架,然后是模块与当前文件的位置:

1import { myLogger, Alligator } from 'app.js';

通过Alias导入

您也可以在导入时为会员代号:

1import myLogger as Logger from 'app.js';

进口所有出口成员

您可以导入由此类型的模块导入的任何东西:

1import * as Utils from 'app.js';

这允许您访问与点符号的会员:

1Utils.myLogger();

导入与默认会员的模块

您通过给出您选择的名称来导入默认会员. 在下面的示例中,Logger 是导入默认会员的名称:

1import Logger from 'app.js';

以下是如何将非默认会员导入到默认会员的顶部:

1import Logger, { Alligator, myNumbers } from 'app.js';