在同一个页面上加载多个 React 应用程序，在 react-scripts 中覆盖 webpack 输出 jsonpFunction

Question

我有一个主要的 React 应用程序，其中基于选定的服务，我正在将另一个 React 应用程序动态加载到第二个根。我正在加载的第二个应用程序使用下面的 webpack.config 捆绑...

const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const glob = require("glob")

module.exports = {
  entry: {
    "bundle.js": glob.sync("build/static/?(js|css)/*.?(js|css)").map(f => path.resolve(__dirname, f)),
  },
  output: {
    filename: "build/bundle.min.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new UglifyJsPlugin()],
}

然后通过下面我的 package.json 中修改后的 npm 运行 build 命令在构建过程中调用它。

"build": "npm run build-sass npm run build:react && npm run build:bundle",
"build:react": "react-scripts build",
"build:bundle": "webpack --config webpack.config.js",
"build-sass": "node-sass --precision=5 --indent-type=space --output-style=nested --indent-width=2 src/styles/Site.scss src/styles/Site.css",

我发现这种方法有几个问题，归结为文章 Hosting multiple React applications on the same document 和 How to 运行 multiple webpack instances on a same page 中的 react-scripts jsonpFunction…并避免任何冲突 .

尽我所能听从他们的建议，我尝试向构建命令添加参数，如下所示

"build:react": "react-scripts build --jsonpFunction=othername"

和

"build:react": "react-scripts build --output jsonpFunction=othername"

和其他不会失败的方法，但我设法让它以任何方式实际工作的唯一方法是进入反应脚本并直接修改 webpack 配置。

由于我需要这些其他项目做的事情的性质，我无法弹出项目并且需要坚持使用反应脚本，所以有人知道在反应脚本的 [=34= 中覆盖此设置的方法吗？ ]?

编辑：我发现 pending pull request 可能会在修改时解决此问题，但它似乎处于停滞状态，解决方法会很好

Answer 1

找到最接近当前可用答案的内容。在最新版本的 react-scripts（撰写本文时为 3.1.1）中，构建过程使用 package.json 中的 name 参数来使 jsonpFunction 唯一（假设您没有加载具有相同名称的项目） .

唯一的缺点是，在此更改中，捆绑过程并未将功能放在 window 上，而是放在 "this" 上。因此，当主应用程序使用 window 上的 jsonpFunction 引导应用程序时，我需要对捆绑输出进行查找和替换以查找 this["webpackJsonp{projectName}"] 并将其替换为 window.webpackJsonp{projectName}.

一个完全可行（如果不是有点肮脏）的解决方法。

在同一个页面上加载多个 React 应用程序，在 react-scripts 中覆盖 webpack 输出 jsonpFunction

Loading multiple react apps on the same page, override webpack output jsonpFunction in react-scripts

reactjs

webpack

react-scripts