如何使用 jspm2 创建导入映射

Posted 2023-02-19

【中文标题】如何使用 jspm2 创建导入映射

【英文标题】：How to create import map with jspm2

【发布时间】：2019-09-24 04:57:06

【问题描述】：

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

【参考方案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>