ES6 中的模块

模块标签

支持 ES6 模块的浏览器会将 type="module" 的脚本标签当作模块处理，并且会忽略带有 nomodule 属性的脚本标签。

<!-- 支持模块的浏览器执行 -->
<script type="module" src="module.js"></script>

<!-- 不支持模块的浏览器执行 -->
<script nomodule src="script.js"></script>

模块的导入导出

命名导出

导出

export const name = "module";
export const age = 18;
export function sayHello() {
  console.log("Hello");
}

导入

import { name, sayHello } from "./es6-export";
console.log(name); // module
sayHello(); // Hello

默认导出

导出

export default function () {
  console.log("default module");
}

导入

import moduleDefault from "./es6-export";
moduleDefault(); // default module

批量导出

导出

const foo = "foo",
  bar = "bar",
  baz = "baz";
export { foo, bar, baz };

导入

import * as Foo from "./es6-export";
console.log(Foo.foo, Foo.bar, Foo.baz); // foo bar baz

重命名导出

导出

const newName = "new module";
export { newName as ModuleName };

导入

import { ModuleName as moduleName } from "./es6-export";
console.log(moduleName); // new module

动态导入

导出

export const dynamic = "dynamic";

导入

import("./es6-export").then((module) => {
  console.log(module.dynamic); // dynamic
});