使用 Create-React-App，是否可以像使用 grunt/gulp 一样在构建过程中将 Inject/replace/append 代码写入 index.html 文件？

Question

Create-react-app 在 build 文件夹中创建一个 index.html 文件，我已经巧妙地将其重命名为 index.aspx (in package.json - "build": "react-scripts build && mv build/index.html build/index.aspx",) 因为我需要应用程序运行在我们服务器上的模板中 - 它确实如此。但是，我目前必须在新 index.aspx 文件中的 <!doctype html> 之前传递 <%@ Page language="c#" CodeBehind="index_fw2.aspx.cs" AutoEventWireup="false" Inherits="IMod.Web.V2.Index" %>，以便模板在我们的服务器上呈现。

我是否可以让 create-react-app 将它注入到新重命名的 index.aspx 文件中，甚至在构建过程中从 index.html 重命名之前?我到处寻找这方面的参考资料。

TIA！

Answer 1

您可以使用 webpack 将任何您想要的内容插入到您的 html 文件中。在当前示例中，我使用 html-webpack-plugin.

webpack.config.js

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

module.exports = {
  ....
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // Path to your index file
      some_variable: '<%@ Page language="c#" CodeBehind="index_fw2.aspx.cs" AutoEventWireup="false" Inherits="IMod.Web.V2.Index" %>', // 
    }),
  ],
};

然后在您的 index.html 文件中插入一个模板变量：

<%= htmlWebpackPlugin.options.some_variable %>
<!DOCTYPE html>
   <html>
   ....

在您运行构建脚本后，webpack 将用配置文件中定义的模板变量替换您的模板变量。

Answer 2

好的，所以我想通了。 Create-React-App 安装它自己使用的 Webpack 版本——也就是说，它已经有一个 webpack.config.js 文件了在 node_modules/react-script/config/webpack.config.js

中使用

所以我找到了这个文件并搜索了 HtmlWebpackPlugin 并在大约第 585 行找到了它：

 plugins: [
      // Generates an `index.html` file with the <script> injected.
      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,

            // Here I added my defined variable name aspxPrefix that is located in my template to be replaced - <%= htmlWebpackPlugin.options.aspxPrefix %>

            aspxPrefix: '<%@ Page language="c#" CodeBehind="index_fw2.aspx.cs" AutoEventWireup="false" Inherits="IMod.Web.V2.Index" %>',

           // Then added the location and name I wanted the modified file to have here - in this case, I want it located in the build folder and renamed with .aspx

          filename: paths.appBuild+'/index.aspx'
          },

伙计，我希望这对某人有所帮助，因为我一天浪费了大约 3 个小时。并感谢@Satif 给我解决方案。您的解决方案有效，但我只需要知道将其放置在 Create-React-App 生成环境中的什么位置。

Answer 3

以下解决方案对我有用。我们不需要为此使用 craco。只需使用 env-cmd 创建一个环境变量并将其放入您的 HTML 代码中。

在环境文件中：

 REACT_APP_ASP_NET=<%@ Page language="c#" CodeBehind="index_fw2.aspx.cs" AutoEventWireup="false" Inherits="IMod.Web.V2.Index" %>

在 HTML 页面中（只需将其放在页面顶部）：

  %REACT_APP_ASP_NET%

使用 Create-React-App，是否可以像使用 grunt/gulp 一样在构建过程中将 Inject/replace/append 代码写入 index.html 文件？

Using Create-React-App, is there anyway to Inject/replace/append code into the index.html file during the build process like you can with grunt/gulp?

asp.net

build-process

code-injection

reactjs

create-react-app