问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

immer 导入报错的问题 ?

头像
qingche
    103225
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="https://unpkg.com/immer"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/immer"></script>
  </head>
  <body></body>
</html>

    官方文档 https://immerjs.github.io/immer/zh-CN/installation/ 提供了 直接引入js的方式
    image.png
    直接使用上面的两种script引入的方式会报错.
    image.png
    为啥会导入 cjs版本的? 不能根据当前是浏览器自动导入umd或者esm吗?

    javascriptnode.js
    阅读 813
    avatarAI BotBETA

    回答

    在 HTML 中通过 <script> 标签直接引入 Immer 库时，你遇到的问题主要是因为 Immer 的 CDN 链接默认提供的是 CommonJS (cjs) 版本的模块，这通常是为 Node.js 环境准备的，而不是为浏览器环境准备的。浏览器无法直接理解和执行 CommonJS 格式的模块，因此会报错。

    解释

    1. 模块格式：JavaScript 模块有多种格式，包括 CommonJS (cjs)、ES Modules (esm) 和 UMD (Universal Module Definition) 等。CommonJS 主要用于 Node.js 环境，而 ES Modules 是现代浏览器支持的模块系统。UMD 是一种旨在兼容多种环境的模块格式。
    2. CDN 链接：当你从 CDN 引入一个库时，你需要确保该链接指向的是适合浏览器环境的模块版本。Immer 的 CDN 链接可能默认指向 CommonJS 版本，或者没有为浏览器环境提供自动选择版本的功能。

    3. 解决方案：

      • 使用 UMD 版本：如果 Immer 提供了 UMD 版本的 CDN 链接，你可以使用该链接来在浏览器中引入 Immer。通常，UMD 版本的链接会在文件名中包含 umd 或 browser 等字样。
      • 使用 ES Modules：如果 Immer 提供了 ES Modules 版本的 CDN 链接，你可以通过 <script type="module"> 标签来引入它。这种方式允许你使用现代 JavaScript 的模块特性。
      • 构建工具：如果你在使用构建工具（如 Webpack、Rollup 等），你可以通过配置这些工具来确保它们正确处理和打包 Immer 库，以便在浏览器中使用。
    4. 检查文档：Immer 的官方文档可能提供了关于如何在浏览器中引入库的特定指导。确保你查阅了最新的文档，并遵循了正确的步骤。

    由于你提供的 CDN 链接（https://cdn.jsdelivr.net/npm/immer）没有指定具体的文件或版本，它可能默认解析到了 CommonJS 版本。你需要找到一个指向 UMD 或 ES Modules 版本的链接，或者考虑使用构建工具来处理这个问题。

    1 个回答
    得票最新
    头像
    陟上晴明
      21.3k134891

      https://cdn.jsdelivr.net/npm/immer 或者 https://unpkg.com/immer 引入的方式，应该是项目默认的暴露方式。很多项目默认都是CJS的形式的，而不是ESM。

      我们可以直接到项目的 package.json 下查看对应的文件URL去使用，比如说 https://unpkg.com/browse/immer/package.json。
      简单看了一下应该可以用
      https://unpkg.com/browse/immer/dist/immer.legacy-esm.js
      或者 https://unpkg.com/browse/immer/dist/immer.production.mjs 的方式来引入。

      但是这样的话，就会受限于文件名。在大版本迭代的时候就可能会出现异常。

      另外就是我记得 jsDelivr 是有提供一个转换服务的，可以直接用末尾添加 +esm 的方式来获取 EMS 形式的资源。
      比如说 https://cdn.jsdelivr.net/npm/immer/+esm。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏