Загрузка нескольких реагирующих приложений на одной странице, переопределение вывода веб-пакета jsonpFunction в реагирующих сценариях

У меня есть основное реагирующее приложение, в котором на основе выбранной службы я динамически загружаю другое реагирующее приложение во второй корень. Второе приложение, которое я загружаю, связано с использованием файла 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()],
}

Затем это вызывается в процессе сборки с помощью модифицированной команды сборки npm run в моем package.json ниже.

"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",

Было несколько проблем с этим подходом, который, как я обнаружил, связан с jsonpFunction-скриптами реагирования в статьях Размещение нескольких приложений React в одном документе и Как запустить несколько экземпляров веб-пакета на одной странице… и избежать конфликтов.

Следуя их совету, я попытался добавить аргументы в команду сборки, как показано ниже.

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

а также

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

и другие способы, которые не приводят к сбою сборки, но единственный способ, которым мне удалось заставить его работать каким-либо образом, - это войти в сценарии реагирования и напрямую изменить конфигурацию веб-пакета.

Из-за характера того, что мне нужно для этих других проектов, я не могу извлекать проекты и должен придерживаться реагирующих сценариев, так что кто-нибудь знает способ переопределить этот параметр в реагирующем сценарии webpack.config?

РЕДАКТИРОВАТЬ: я нашел ожидающий запрос на вытягивание, потенциально способный решить эту проблему при модификации, но кажется, он стоит на месте, было бы неплохо найти обходной путь


person James Morrison    schedule 25.07.2019    source источник


Ответы (1)


Нашел самое близкое к ответу, доступному на данный момент. В последней версии реактивных скриптов (3.1.1 на момент написания) процесс сборки использует параметр name в package.json, чтобы сделать jsonpFunction уникальной (при условии, что вы не загружаете проекты с одинаковым именем).

Единственным недостатком является то, что в этом изменении процесс связывания не помещает функцию в окно, а «это». Поэтому, пока основное приложение загружает приложение с jsonpFunction в окне, мне нужно выполнить поиск и замену в связанном выводе, чтобы найти this["webpackJsonp{projectName}"] и заменить его на window.webpackJsonp{projectName}.

Совершенно жизнеспособный (если не слегка грязный) обходной путь.

person James Morrison    schedule 15.11.2019