我可以从 Webpack 中的 CDN 动态导入 npm 包吗？答案

【问题标题】：Can I import npm packages dynamically from CDNs in Webpack?我可以从 Webpack 中的 CDN 动态导入 npm 包吗？
【发布时间】：2021-10-13 15:34:44
【问题描述】：

我需要在我的 JS 包中动态要求不同版本的 Zoid npm 包，具体取决于变量。比如：

if (isLatestVersion) {
  zoid = await import('https://unpkg.com/zoid@9.0.80/index.js')
} else {
  zoid = await import('https://unpkg.com/zoid@9.0.31/index.js')
}

但是，当我尝试上述方法时，我得到了这个错误：

script.js:2 Uncaught (in promise) Error: Cannot find module 'https://unpkg.com/zoid@9.0.80/index.js'
    at webpackMissingModule (script.js:2)

大概这是因为我的 package.json 中没有定义zoid。

所以基本上我的问题是，有没有一种方法可以使用 Webpack 的动态导入（也称为代码拆分）从 CDN（如 unpkg.com 或 skypack.dev）导入库？

【问题讨论】：

这应该可以正常工作。也许您可以发布您的 package.json 和 webpack.config.js？有什么原因，为什么你使用 webpack 4 而不是 5？

标签： javascript webpack webpack-4

【解决方案1】：

我最终解决这个问题的方法是在我的 package.json 中添加同一个包的两个版本。所以我运行了这些命令：

yarn add zoid9080@npm:zoid@9.0.80
yarn add zoid9031@npm:zoid@9.0.31
yarn remove zoid

然后我静态导入了这两个包，因为我实际上不需要动态导入，代码也变得更简单了：

import zoid from 'zoid9080';

【讨论】：