代码之家 › 专栏 › 技术社区 › pma

如何将React应用嵌入其他网站

reactjs

pma · 技术社区 · 6 年前

我有一个旧网站在服务器x上运行。现在已经开发了一个React应用程序,它位于服务器y上。

网站应该显示React应用程序。

我已经搜索并阅读了几篇关于这个话题的帖子,但到目前为止都没有成功。

如果我这样做了

npm run

并检查承载React应用程序的服务器上的源代码,有以下内容:

...

<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的一部分,并把它放到老网站。这可能吗?如果可能,怎么可能?

2 回复 | 直到 6 年前

pma 6 年前

我的方法确实有效,但我错过了以下两个脚本:

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

编辑

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

为了与IE11兼容,需要使用polyfill
处理的每个文件(从条目开始)都算作模块。如果它与规则的“test”部分匹配,则应用该规则(排除项除外)。

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

插件建议类属性是唯一需要的,因为我在类中有一些静态成员。

运行时

npm start

Webpack Dev服务器将启动并使应用程序可以在 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>

Eliâ Melfior 6 年前

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