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

Question

我尝试使用动态导入 - 导入（）

我已经读过dynamic-import documentations 并观看了这个chrome devtools video，

仍然无法找到正确的方法。

错误：

  

未捕获（承诺）ReferenceError：未定义模块

样板：

我创建了一个新项目。

没有网络包，没有任务选手。

只运行带有http-server节点包的服务器及其中的文件：

1. 的的index.html
2. 的 index.js
3. 的 a.js

的index.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) })
});

a.js

module.exports = { type: 'LazyModule'}

我在这里缺少什么？

Answer 1

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

要实现这一点，您需要在任何地方使用ES模块语法：

index.html ：将type="module"添加到条目文件

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

index.js ：这个很好

<强> a.js

export const type = 'LazyModule';

重要的是要注意浏览器中的模块分辨率方法与任何其他资产（链接到html文件，图像等）相同。