如何使用 jspm2 创建导入映射答案

【问题标题】：How to create import map with jspm2如何使用 jspm2 创建导入映射
【发布时间】：2019-09-24 04:57:06
【问题描述】：

我正在尝试使用 JSPM 模块加载器从 npm 导入 javascript 包，并使用离线包加载器而不是 CDN。
现在我想添加一个importmap 脚本，这样我就可以在我的模块中导入react 或另一个模块，例如：
import React from 'react'
我该怎么做才能做到这一点？

【问题讨论】：

标签： javascript npm module node-modules jspm

【解决方案1】：

您可以使用importmap 作为标准的新方法来实现您的目标并在您的js 模块文件中导入npm 模块，而无需编写像node_modules/react@16.x.x/index.js 这样的完整路径，只需编写import React from 'react'，就像我们以前在webpack 中编写的那样或汇总。
要在安装 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>

【讨论】：