如何在JavaScript项目中使用GitHub上的cubing/jsss开源模块

你遇到的报错核心原因有两个：

• 浏览器原生ES模块不支持裸模块导入，官方示例里import from "scrambles"这种不带路径前缀的写法，只有使用打包工具或者配置了importmap才能识别，你直接放到浏览器里跑自然会触发第一个报错
• 你手动补的路径指向的不是合法JS文件，服务器返回了404页面（HTML格式），所以触发了MIME类型错误
  另外这个库的源码是TypeScript编写的，直接复制仓库src目录的源码无法直接在浏览器运行，需要先编译为标准JS文件，所以你之前复制文件的操作本身就不可行。

问题1：index.js应该放在什么位置 #

直接放在项目根目录，和index.html同级即可，这个位置完全没问题，之前的报错和index.js的摆放位置无关。

问题2：不需要手动复制仓库文件，推荐两种集成方案 #

方案一：零构建纯静态页面方案（无需安装工具）

无需下载任何仓库文件，直接修改index.html添加importmap配置即可：

<!-- index.html 完整代码 -->
<script type="importmap">
{
  "imports": {
    "scrambles": "./libs/cubing/scrambles/index.js"
  }
}
</script>
<script src="index.js" type="module" defer></script>

<select id="eventID">
  <option value="333" selected>3x3x3</option>
  <option value="444">4x4x4</option>
</select>
<button id="new-scramble">New scramble</button><br>

<div id="scramble-string"></div>

你只需要获取cubing包的编译后产物，放到项目的libs/cubing目录即可，index.js保持官方示例的写法无需修改。

方案二：npm管理依赖方案（配合打包工具使用）

如果你的项目用npm管理依赖，直接执行安装命令：

npm install cubing

然后修改index.js的导入语句即可：

import { randomScrambleStringForEvent } from "cubing/scrambles";

其余逻辑保持和官方示例一致，经打包工具构建后即可正常运行。

内容的提问来源于stack exchange，提问作者FuzzyLogic12