ES Module 语法规范ES Module 是 ES6之后官方推出的模块化规范，使得js可以原生支持模块化，目前大多

ES Module 是 ES6之后官方推出的模块化规范，使得js可以原生支持模块化，目前大多在服务端node.js中使用CommonJS方案，在浏览器中使用ES Module方。在 ES Moudle 之前，浏览器中通常使用 AMD 或 CMD。本文简要介绍 ES Module 的语法规范

import

通过 import 导入的值不能被重新赋值，这点类似于ES6的 const 声明

根据指定变量名，从源模块中导入相应内容

import { something } from './module.js';

被导入的内容可以重新定义变量名

import { something as somethingElse } from './module.js';

将源模块中的所有内容作为对象导入，源模块中暴露的值和函数将为将会成为该对象的属性和方法

import * as module from './module.js';

console.log(module.something)； //something 成为 module 的属性值

导入默认暴露的内容，默认暴露稍后介绍

import something from './module.js';

只是加载模块，但不引用其中的变量

import './module.js';

动态导入

import('./modules.js').then(({ default: DefaultExport, NamedExport }) => {
  // do something with modules.
});

将一个值单独暴露。以下模块中暴露的 something 可以通过 import {something} form 'XXX' 的方式引入

const something = true;
export { something };

对暴露的内容重命名

export { something as somethingElse };

将声明的变量立即暴露

// this works with `var`, `let`, `const`, `class`, and `function`
export const something = true;

它等效于以下写法

const something = true;
export { something };

默认暴露于默认引入相对应，默认暴露的变量被默认引入的方式消费。

export default something;

这种方式是在模块中仅有一个需要暴露的内容的情况下引用。例如在 React 中通过默认暴露的方式在 tsx 文件中暴露组件。