在缩小的反应构建上强制换行

Question

我目前正在开发一个开源项目，我想添加一个额外的行，其中包含项目的 link 注释，这样如果有人访问页面源代码，他将看到 link，但我有一个问题，react 将缩小构建时的源代码并删除 public html 上的所有评论 ，我如何欺骗 react build 到 不删除我的评论，甚至在它之前换行。

我的publicindex.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/static/favicon.ico" />
    <title>...</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
<!-- this project is open source -->

构建版本：

<!doctype html><html lang="en"><head>.....</html>

我想要什么：

<!doctype html><html lang="en"><head>.....</html>
<!-- this project is open source -->

Answer 1

我可以想到两种方法：

使用 Webpack

有一个 webpack 插件可以做到这一点。然而，它是为 webpack 4 编写的，因此它可能不适用于 v5。并将横幅添加到文件的顶部，而不是末尾。

html-webpack-top-banner-plugin

构建后附加横幅

您也可以在文件构建后简单地附加到文件。（我假设您在这里使用 Linux，但可以为其他 OS 找到类似的方法）

像这样修改 package.json 中的 build 脚本：

"build": "react-scripts build && echo '\n<!-- This is open source -->' >> build/index.html",

下次运行构建时，注释将附加到文件中。

在缩小的反应构建上强制换行

Force new line on minified react build

minify

uglifyjs

reactjs

使用 Webpack

构建后附加横幅