Question

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

我需要实现允许我的应用与客户端插件配合使用的功能-js文件，这些文件会覆盖某些类的现有功能。它可以从任何地方加载-本地文件系统或远程存储库，应该在runtime中提取，因为我需要有一个选项来指定config中的新扩展名，只需按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)，则可能必须采取额外的步骤。

如何动态加载CommonJs模块？

1 个答案: