我该如何动态加载CommonJs模块？

Question

我正在使用React、TS和Webpack技术栈开发应用程序。

我需要实现一项功能，使我的应用程序能够与客户端插件（js文件）一起工作，这些插件可以覆盖某些类的现有功能。它可以从本地文件系统或远程存储库加载，并且应在运行时获取，因为我需要在配置中指定新扩展名并按下F5键。

动态导入不适用于我的情况，因为据我所知，Webpack至少需要大致猜测import()是什么意思。使用简单的“get”请求可能是一个选项，但在这种情况下，如何将加载的脚本用作CommonJS模块？我的对于动态导入行为的理解是否正确？

- letlui

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 如果设置了内容安全策略（CSP），则可能需要采取额外的步骤。

- joelnet