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

使用 ES2015 (ES6)，获得对 JavaScript 模块的内置支持。 与 CommonJS 一样，每个文件都是它自己的模块。 要使外部世界可以使用对象、函数、类或变量，只需将它们导出，然后将它们导入其他文件中需要的位置。 Angular 2 大量使用 ES6 模块，所以语法对于那些在 Angular 中工作过的人来说会非常熟悉。 语法非常简单：

出口

您可以一一导出成员。 未导出的内容不能直接在模块外部使用：

export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle']; // Not available directly outside the module

export function myLogger() {
  console.log(myNumbers, animals);
}

export class Alligator {
   constructor() {
     // ...
   }
}

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

export { myNumbers, myLogger, Alligator };

使用别名导出

您还可以使用 as 关键字为导出的成员指定别名：

export { myNumbers, myLogger as Logger, Alligator }

默认导出

您可以使用 default 关键字定义默认导出：

export const myNumbers = [1, 2, 3, 4];
const animals = ['Panda', 'Bear', 'Eagle'];

export default function myLogger() {
  console.log(myNumbers, pets);
}

export class Alligator {
  constructor() {
    // ...
  }
}

输入

导入也非常简单，使用 import 关键字，在大括号中导入要导入的成员，然后是模块相对于当前文件的位置：

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

使用别名导入

您还可以在导入时为成员别名：

import myLogger as Logger from 'app.js';

导入所有导出的成员

您可以像这样导入由模块导入的所有内容：

import * as Utils from 'app.js';

这允许您使用点符号访问成员：

Utils.myLogger();

导入具有默认成员的模块

您可以通过给它一个您选择的名称来导入默认成员。 在以下示例中，Logger 是为导入的默认成员指定的名称：

import Logger from 'app.js';

以下是在默认成员之上导入非默认成员的方法：

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