时间戳

首页 > 解决方案 > React 应用程序注入 js 而不是 index.html

reactjs - React 应用程序注入 js 而不是 index.html

问题描述

我想创建一个不是独立站点的 React 应用程序，而是对现有站点的扩展。该站点是使用 asp.net 构建的，我无法对其进行编辑。我确实有一个带有 javascript 的条目，并且可以运行如下代码：

$(document).onload(() => {
  $(body).parent().append(`
    <script src='{...}'></script>      
  `);
});

有什么办法可以将标准Index.html输出从默认create-react-app更改为.js文件并将反应块添加到附加中？它不一定需要遵循上述方向，但据我所知。

标签： reactjscreate-react-app

解决方案

我相信您可以使用 ReactDOM.render 将其附加到主体上

ReactDOM.render(
  <React>
    <App />
  </React>,
  document.getElementByTagName('body')
)

但是您可能必须从使用 webpack 切换create-react-app到使用 webpack，然后HTMLWebpackPlugin在您的内部使用类似的东西webpack.config.js来指定入口点

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  target: 'web',
  mode: 'development',
  entry: './src/index.jsx',
  devtool: "source-map",
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: "[name]/[name].js",
  },
  ...
      new HtmlWebpackPlugin({
        template: './html/index.html',
        filename: './index.html'
      }),
  ...
}

您必须安装html-webpack-plugin以及webpack您需要的任何东西npm install html-webpackplugin webpack ...

如果您查找有关此的教程，请尝试查找React 17它们Webpack 5是相当新的。Webpack 5与 Webpack 4 相比，热重载有一些差异

推荐阅读