现代 JS：import 和 export

Source: Dev.to

本文最初发布在 bmf-tech.com。
※转载自 Innovator Japan Engineers’ Blog。

什么是 export

export 是一种语句，允许你把函数、变量、对象、类等从文件中暴露出来，以便在其他地方导入使用。

命名导出（Named exports）

你需要显式指定要导出的元素名称。

export { fooFunction };

export { fooFunction, barFunction, /* … */ };

export const foo = 'bar';

export let foo, bar, /* … */;

export class Foo { /* … */ }

默认导出（Default exports）

当你想从模块中导出唯一的“默认”值时，使用 default 关键字。

export default function fooFunction() { /* … */ }

export default class Bar { /* … */ }

注意： var、let 和 const 不能与 export default 一起使用。

什么是 import

import 用来加载从其他文件导出的函数、变量和对象。

import { foo } from "Foo";
import { foo, bar } from "FooBar";
import { foo as bar } from "Foo";               // 别名
import { foo as bar, bar as foo } from "FooBar";
import "FooBar";                                 // 仅为副作用而导入

导入的绑定在当前（本地）作用域中可用。

如何导入使用 export default 定义的默认元素

直接导入默认导出：

import fooDefault from "Bar";

如果还需要同一模块的命名导出，可在默认导入后列出它们：

import fooDefault, { foo, bar } from "FooBar";

导出 / 导入类的示例

导出命名类和默认类

export.js

export class Foo {
  fooFunction() {
    return 'foo';
  }
}

export default class Bar {
  barFunction() {
    return 'bar';
  }
}

import.js

import { Foo } from './export';   // 命名导入
import Bar from './export';       // 默认导入

const objFoo = new Foo();
const objBar = new Bar();

console.log(objFoo.fooFunction()); // foo
console.log(objBar.barFunction()); // bar

导出创建实例的工厂函数

export.js

class Foo {
  fooFunction() {
    return 'foo';
  }
}

function createFoo() {
  return new Foo();
}

export default createFoo;

import.js

import createFoo from './export';

const fooInstance = createFoo();
console.log(fooInstance.fooFunction()); // foo

小结

掌握 export 与 import 的规范非常重要，因为它们在 Vue.js、React 等现代框架中被大量使用。

参考资料

• MDN – Export
• MDN – Import