Question

我有一个具有ejs模板的现有多页面应用程序，但是，我想在其中一个页面中使用React。

是否可以使用webpack混合两者？

例如，我希望当前页面上的所有内容保持不变，但对特定的div使用React

我可以将我的react文件与webpack捆绑在一起，但是，无法将其链接到tag以便进行这项工作。任何帮助将不胜感激。

这是我的webpack配置文件：

const path = require("path");

const outputDirectory = "dist";

module.exports = {
  entry: "./src/react/index.js",
  output: {
    path: path.join(__dirname, outputDirectory),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader?limit=100000"
      }
    ]
  },
  devServer: {
    port: 3000
  }
};

我找到了一种方法，每次生成一个生产版本，然后将dist bundle.js链接到express服务的ejs中的脚本文件。

但是，我相当确定这可以通过更好的方式来完成，但是找不到找到解决方法的方式。

Answer 1

只要在React代码中选择HTML元素，就可以通过通过<script>元素中的<head>标签加载React库来编写React代码。

例如，如果您想在React中编写一个“赞”按钮，则在HTML中提供唯一的ID：

<div id="like_button_container"></div>

然后，在JavaScript中选择元素并使用React进行渲染：

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

Dan Abramov可以在此处找到完整的示例：https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605

因此，在Webpack中，我们只需要找到以某种方式将<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>添加到<head>元素中的方法。取决于您如何设置index.html，您可以1）将脚本标签直接添加到index.html或2）使用html-webpack-pluign之类的插件动态生成{{1} }

如何使用ejs对现有的快速多页项目添加响应？

1 个答案: