如何动态加载 CommonJs 模块？

【问题标题】：How can i dynamically load CommonJs module?如何动态加载 CommonJs 模块？
【发布时间】：2019-05-18 21:42:22
【问题描述】：

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

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

动态导入不是我的情况，因为据我了解Webpack 至少需要能够大致猜测import() 的含义是什么。使用简单的“获取”请求可能是一种选择，但在这种情况下，我如何将加载的脚本用作CommonJS 模块？我对动态导入行为是否正确？

【问题讨论】：

标签： javascript webpack commonjs

【解决方案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)，您可能需要采取额外的步骤。

【讨论】：