如何动态加载CommonJs模块？

Question

我正在使用React，TS和Webpack堆栈开发应用程序。

我需要实现允许我的应用程序与客户端插件一起工作的功能-覆盖某些类的现有功能的js文件。它可以从任何地方的本地文件系统或远程存储库加载，并且应该在runtime中获取，因为我需要有一个在配置中指定新扩展名的选项，只需按F5即可。

动态导入不是我的情况，因为据我所知，Webpack至少需要能够粗略地猜测import()引用的是什么。使用简单的'get‘请求可能是一种选择，但在这种情况下，我如何使用加载的脚本作为CommonJS模块？我对动态导入行为的看法正确吗？

Answer 1

您可以使用@paciolan/remote-module-loader远程加载一个通用的js模块。

import { createLoadRemoteModule } from "@paciolan/remote-module-loader"

const main = async() => {
  const loadRemoteModule = createLoadRemoteModule()
  const myModule = await loadRemoteModule("http://fake.url/modules/my-module.js")

  const value = myModule.default()
  console.log({ value })
}

main()

如果需要将依赖项传递给模块：

import {
  createLoadRemoteModule,
  createRequires
} from "@paciolan/remote-module-loader"

const dependencies = {
  react: require("react")
}

const main = async() => {
  const requires = createRequires(dependencies)
  const loadRemoteModule = createLoadRemoteModule({ requires })
  const myModule = await loadRemoteModule("http://fake.url/modules/my-module.js")

  const value = myModule.default()
  console.log({ value })
}

main()

如果需要加载React组件，请查看@paciolan/remote-component

如果您设置了Content Security Policy (CSP)，则可能需要执行额外的步骤。