Javascript ReactRouter 4在对React、ReactDOM和ReactRouter使用外部时出现问题

我目前正在一个应用程序中实现React Router v.4，我还使用Webpack进行捆绑。 在我的网页配置中，我将React、ReactDOM和React路由器dom设置为外部依赖项。我使用脚本标记将它们导入到index.html中。 我无法让这种方法发挥作用。 当我在Web包的externals部分设置以下内容时，我从React获得以下错误：

externals: {
"react-router": "ReactRouter",
"react-router-dom: "ReactRouterDOM",
"react": "React",
"react-dom": "ReactDOM"}

错误： 不变冲突：元素类型无效。需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件

所有东西都是出口的，这不是问题所在。在我实现ReactRouter 4之前，页面工作得非常好。 当我在Chrome中进行一些调试时，我看到了该类型（在本例中，该类型是一个未定义的“路由器”）

我的索引如下所示：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { App } from "./main/App";
import {BrowserRouter} from "react-router-dom";

ReactDOM.render((<BrowserRouter><App /></BrowserRouter>), document.getElementById("root"));

<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
<script src="./node_modules/react-router/umd/react-router.js"></script>
<script src="./node_modules/react-router-dom/umd/react-router-dom.js"></script>

import*as React from“React”；
从“react dom”导入*作为react dom；
从“/main/App”导入{App}；
从“react router dom”导入{BrowserRouter}；
render（（），document.getElementById（“根”）；

如果我在externals中对ReactRouter部分进行注释，它就可以工作，但是我希望路由器作为一个外部全局文件，而不是捆绑在bundle.js文件中

我不确定如何使用externals部分以及在字段中实际写入什么。也许我的名字错了什么的？我试过几种不同的组合。每次都失败

另外，my index.html如下所示：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { App } from "./main/App";
import {BrowserRouter} from "react-router-dom";

ReactDOM.render((<BrowserRouter><App /></BrowserRouter>), document.getElementById("root"));

<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
<script src="./node_modules/react-router/umd/react-router.js"></script>
<script src="./node_modules/react-router-dom/umd/react-router-dom.js"></script>

我不确定我是否需要react路由器，所以我在index.html和externals中尝试了使用和不使用react路由器，没有更改，像往常一样失败

---

希望您能帮我解决这个问题，我在第3网页中没有找到任何关于外部的好文档来帮助我理解为什么会出现这个错误。

如果您在浏览器中使用路由器，我想您只需要这三个条目：

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM',
  'react-router-dom': 'ReactRouterDOM'
}

顺便说一句，您可能还想看看这一点，以自动化您正在尝试做的事情。这是我最近在Webpack4开发中使用的一个配置，您可能会发现其中的一些内容很有帮助：

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
const WebpackBar = require('webpackbar');

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html",
  hash: true,
});

const externals = [
  {
    "module": "react",
    "entry": "//unpkg.com/react@16/umd/react.production.min.js",
    "global": "React"
  },
  {
    "module": "react-dom",
    "entry": "//unpkg.com/react-dom@16/umd/react-dom.production.min.js",
    "global": "ReactDOM"
  },
  {
    "module": "react-router-dom",
    "entry": "//cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.2.2/react-router-dom.min.js",
    "global": "ReactRouterDOM"
  }
];

module.exports = {
  // devtool: 'eval-source-map',
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, "src"),
    ]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            retainLines: true,
          }
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
    ]
  },
  plugins: [
    new WebpackBar(),
    htmlPlugin,
    new HtmlWebpackExternalsPlugin({
      externals: externals,
    }),
  ],
  stats: {
    modules: false,
    colors: true,
  },
};

---

像这样加载库有什么意义？像什么样加载库？使用脚本标记和外部依赖项。为什么不做这两件事呢？因为如果不捆绑外部依赖项，您可以优化加载时间并获得缓存好处，例如，您可以得到一个更轻的bundle.js，它可以更快地加载。