30秒学会 JavaScript 片段 – JavaScript modules Cheat Sheet

Named exports

代码实现

export const key = 'this-is-a-secret';

使用样例

import { key } from 'environment';

• Named exports use a name.
• A module can have any number of named exports.
• Import and export name should be the same.
• Importing requires {}.

Default exports

const environment = {
  key: 'this-is-a-secret',
  port: 8000
};

export default environment;

import environment from 'environment';

const { key, port } = environment;

• Default exports expose a default value, use the default keyword.
• A module can only have one default export.
• Import name can be anything.
• Importing does not require {}.

Default + named

export const envType = 'DEV';

const environment = {
  key: 'this-is-a-secret',
  port: 8000
};

export default environment;

import { envType }, environment from 'environment';

const { key, port } = environment;

• Default and named exports can be mixed.
• Rules about number of exports and naming conventions apply as before.
• Import rules apply as before, can be mixed if necessary.

Export list

const key = 'this-is-a-secret';
const port = 8000;

export {
  key,
  port
};

import { key, port } from 'environment';

• An export list is a compact way to write multiple named exports.
• Rules about number of exports, naming conventions and import rules are the same as those of named exports.
• Export lists are not objects.

Rename export

const key = 'this-is-a-secret';

export { key as authKey };

import { authKey } from 'environment';

• Named exports can make use of the as keyword to rename an export.
• Import name should be the same as the renamed export.

Rename import

export const key = 'this-is-a-secret';

import { key as authKey } from 'environment';

• Named imports can make use of the as keyword to rename an import.
• Import name (before the as keyword) should be the same as the export.

Import all

export const envType = 'DEV';

const environment = {
  key: 'this-is-a-secret',
  port: 8000
};

export default environment;

import * as env from 'environment';

const { default: { key, port}, envType } = environment;

• Use * to import everything a module exports.
• Named exports will be available by their names on the imported object.
• Default export will be available as the default key on the imported object.

翻译自：https://www.30secondsofcode.org/js/s/module-cheatsheet