ES6 中的模块
模块标签
支持 ES6 模块的浏览器会将 type="module"
的脚本标签当作模块处理,并且会忽略带有 nomodule
属性的脚本标签。
html
<!-- 支持模块的浏览器执行 -->
<script type="module" src="module.js"></script>
<!-- 不支持模块的浏览器执行 -->
<script nomodule src="script.js"></script>
模块的导入导出
命名导出
ts
export const name = "module";
export const age = 18;
export function sayHello() {
console.log("Hello");
}
ts
import { name, sayHello } from "./es6-export";
console.log(name); // module
sayHello(); // Hello
默认导出
ts
export default function () {
console.log("default module");
}
ts
import moduleDefault from "./es6-export";
moduleDefault(); // default module
批量导出
ts
const foo = "foo",
bar = "bar",
baz = "baz";
export { foo, bar, baz };
ts
import * as Foo from "./es6-export";
console.log(Foo.foo, Foo.bar, Foo.baz); // foo bar baz
重命名导出
ts
const newName = "new module";
export { newName as ModuleName };
ts
import { ModuleName as moduleName } from "./es6-export";
console.log(moduleName); // new module
动态导入
ts
export const dynamic = "dynamic";
ts
import("./es6-export").then((module) => {
console.log(module.dynamic); // dynamic
});