无论是内部方式还是外部方式，带有 type="module" 属性的 <script> 标签会告诉浏览器相关代码应该作为模块执行，而不是作为普通的脚本执行。
无论是内部方式还是外部方式，一个 HTML 页面有多少个 type="module" 属性的 <script> 标签没有限制。
无论是内部方式还是外部方式，同一个模块无论在同一个 HTML 页面中被加载(导入)多少次，实际上只会被加载(导入)一次。
<!-- 假设这是index.html页面，模块moduleA在index.html页面只会被加载(导入)一次。 -->
<script type="module">
import './moduleA.js';
</script>
<script type="module">
import './moduleA.js';
</script>
<script type="module" src="./moduleA.js"></script>
<script type="module" src="./moduleA.js"></script>1.内部(Internal)方式
往往用于单个网页。
<script type="module">
//export语句
//无法导出，因为<script>标签无为此模块命名的语法。
export ...;
export ... from '模块标识符';
//import语句(静态导入)
import ... from '模块标识符';
import '模块标识符';
</script><script>
//import运算符(动态导入)
//注意：动态导入外围的<script>无需type="module"属性。
import('模块标识符');
</script>2.外部(External)方式
往往用于所有网页。
<script type="module" src="./module.js"></script>3.importmap
<script type="importmap">
//JSON对象
</script>有 type="importmap" 属性的 <script> 元素(只支持内部方式)用于映射其它 <script> 元素(支持内部方式和外部方式)中 import 语句 和 import() 运算符中的模块标识符到对应的值。
注意：defer、async 属性不可以与 type="importmap" 属性同时声明。
注意：映射的时候跟属性名的顺序没有关系，如果有多个属性名可以映射，则使用最具体的属性名。
注意：有 type="importmap" 属性的 <script> 元素必须在有 import 语句 和 import() 运算符的 <script> 元素之前被处理，否则映射不到对应的值。
注意：同一个 HTML 页面中只有第一个有 type="importmap" 属性的 <script> 元素会被处理，任何后续的有 type="importmap" 属性的 <script> 元素都会被忽略。
//index.html(省略部分代码)
<!doctype html>
<html lang="en">
<head>
<script type="importmap">
<!-- JSON对象 -->
{
"imports": {
<!-- 属性值为解析以后实际的模块标识符 -->
<!-- 情形1：属性名的末尾无正斜杠 -->
"lodash": "/node_modules/lodash-es/lodash.js",
"https://example.com/lodash.js": "/node_modules/lodash-es/lodash.js",
<!-- 情形2：属性名和属性值的末尾都有正斜杠 -->
"lodash/": "/node_modules/lodash-es/",
"https://example.com/": "/node_modules/lodash-es/"
}
}
</script>
<script type="module" src="./main.js"></script>
</head>
<body>
</body>
</html>//main.js
//以下都映射到/node_modules/lodash-es/lodash.js
//情形1
import ... from "lodash";
import ... from "https://example.com/lodash.js";
//情形2
import ... from "lodash/lodash.js";
import ... from "https://example.com/lodash.js";原创文章，作者：huoxiaoqiang，如若转载，请注明出处：https://www.huoxiaoqiang.com/experience/javascriptexp/33926.html
微信扫一扫 
支付宝扫一扫