javascript - 使用动态导入的方法是什么？

Question

我正在尝试使用动态导入 - import()

我已阅读此动态导入文档 并观看此chrome devtools 视频，

仍然找不到正确的方法。

错误：

Uncaught (in promise) ReferenceError: module is not defined

样板：

我创建了一个新项目。

没有 webpack，没有任务运行器。

只是运行带有这些文件的http-server节点包的服务器：

1. 索引.html
2. index.js
3. 一个.js

索引.html：

<button id="btn"> Lazy load a module</button>
<script src="index.js"></script>

index.js：

const btn = document.querySelector('#btn');

btn.addEventListener('click', event => {
  import('./a.js').then(module => { console.log(module) })
});

一个.js

module.exports = { type: 'LazyModule'}

我在这里想念什么？

Answer 1

动态导入功能来自 ECMAScript 标准，同时module.exports是 commonjs 加载器的一部分（如 browserify）

为了让它工作，你想在任何地方使用 ES Module 语法：

index.html : 添加type="module"到入口文件

<button id="btn"> Lazy load a module</button>
<script src="index.js" type="module"></script>

index.js：这个很好

一个.js

export const type = 'LazyModule';

---

重要的是要注意浏览器中的模块解析方法与任何其他资产（指向 html 文件、图像等的链接）的方法相同。