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';

觉得文章有用?

点个广告表达一下你的爱意吧 !😁