如何将React App嵌入到另一个网站

Question

我在服务器x上运行了一个旧网站.现在已经开发了一个React-App,它位于服务器y上.

该网站应显示React-App.

我已经搜索过几篇关于这个主题的帖子,但到目前为止还没有成功.目前唯一有效的解决方案是iframe,但我们不希望这样.

如果我做

npm run

并检查托管React-App的服务器上的源,有以下内容:

...

<div id="react-reporting"></div>

<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script>

基本上我想把这个HTML部分放到旧网站上.这是可能的,如果是的话怎么样？

Answer 1

我的方法确实有效，但是我错过了以下两个脚本：

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

因此，对于本地测试是：

 <div id="react-reporting"></div>
 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 <script src="http://localhost:3000/static/js/bundle.js"></script><script src="http://localhost:3000/static/js/0.chunk.js"></script>
 <script src="http://localhost:3000/static/js/main.chunk.js"></script>

我也遇到了一个关于sockjs的错误，该错误是由导入React App的测试文件以file：//而不是通过http：//打开的

编辑

经过更多测试后，我发现使用webpack是最好的解决方案-它使应用程序可以作为单个文件访问。

package.json

...
"scripts": {
    "start": "webpack-dev-server --inline --hot",
    "build": "webpack --config webpack.config.js"
},
...

webpack.config.js

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

 module.exports = {
     entry: ['@babel/polyfill','./src/index.js'],
     output: {
        filename: "bundle.js"
     },
     module: {
        rules: [
             {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
             },
             {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ],
    },
    optimization: {
        minimizer: [new UglifyJsPlugin()]
    }
}

• 需要polyfill以与IE11兼容
• 每个处理过的文件（从条目开始）都计为模块。如果它与规则的“测试”部分匹配，则将应用该规则（排除除外）。

.babelrc

{
   "presets": ['@babel/react',
              ['@babel/preset-env', {
                 "targets": {
                   "browsers": ["last 2 versions", "ie >= 11"]
                }
              }]],
  "plugins": ['@babel/plugin-proposal-class-properties']
}

• 仅因为我在类中有一些静态成员，才需要plugin-proposal-class-properties。

跑步时

npm start

Webpack-Dev-Server将启动，并使该应用程序可以在http：// localhost：8080 / dist / bundle.js下访问。

将应用程序嵌入另一个站点的代码：

<div id="react-reporting"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="http://localhost:8080/dist/bundle.js"></script>