编辑

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

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

def get_slot_dict(clips_instance):
    slot_dict = {}
    for s in clips_instance.instance_class.slots():
        slot_dict[s.name] = clips_instance[s.name]
    return slot_dict

因此，在本地进行测试是：

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

我还遇到了一个关于sockjs的错误，该错误是由导入React App的测试文件未通过http：//

打开为file：//引起的。

编辑

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

package.json

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

webpack.config.js

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

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

.babelrc

 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()]
    }
}

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

运行时

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

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

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

npm start

Answer 2

如果您使用的是create-react-app，请转到React App的文件夹，然后插入以下命令：

npm运行构建

这将生成一个./build文件夹，其中包含应用程序所需的全部内容。
然后只需将./build文件夹拖到服务器x即可。
您还可以更改调用react应用的HTML，使其适合旧网页。

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

2 个答案:

编辑