如何使用 jspm2 创建导入映射

Question

我正在尝试使用 JSPM 模块加载器从 npm 导入 javascript 包，并使用离线包加载器而不是 CDN。
现在我想添加一个importmap脚本，以便我可以在我的模块中导入react或其他模块，例如：
import React from 'react'
我能做些什么来实现这一点？

Answer 1

您可以使用importmap作为实现目标的标准新方法，并在JS模块文件中导入npm模块，而无需像node_modules/react@16.x.x/index.js那样编写完整的路径，而只需像以前在Webpack或Rollup中编写的那样编写import React from 'react'。
要在安装 JSPM 并使用 JSPM 安装所需的包后实现此目的，请先运行以下命令：

jspm map -o importmap.json --flat-scope 

它将为 JSPM 模块生成当前导入映射，然后创建一个包含导入映射数据的文件。 使用 --flat-scope 是必要的，因为 Chrome 目前不支持导入地图范围。 您必须获取 JSON 文件并将其注入到 HTML 文件中。 首先创建一个bootstrap.js文件，并将以下代码粘贴到其中：

class bootstrap{
constructor(){
this.initMapper().then(()=>{
this.lunchApp();
})
}
async initMapper() {
document.head.appendChild(Object.assign(document.createElement('script'), {
type: 'importmap',
innerHTML: await (await fetch('/importmap.json')).text()
}));
}
lunchApp(){
import('/Client/Assets/js/index.js');
}
}
var app = new bootstrap();

然后将bootrstrap.js添加到index.html文件中：

<script defer src="/Client/Assets/js/bootstrap.js"></script>