javascript - 如何动态加载 CommonJs 模块？

Question

我正在使用 React、TS 和 Webpack 堆栈开发应用。

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

动态导入不是我的情况，因为据我所知，Webpack 至少需要能够粗略地猜测 import() 意味着引用什么.使用简单的“获取”请求可能是一种选择，但在这种情况下我如何将加载的脚本用作 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)，您可能需要采取额外的步骤设置。