在使用React-create-app开发的过程中,你也许需要根据环境变量,在 index.html 中引入不同的HTML标签。尤其是在解决 SEO 或者是使用数据上报服务 GoogleAnalystics 的时候。

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>test</title>
    <meta name="keywords" content="test"> 
    <meta name="description" content="description"/>
  </head>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  <!-- 想仅在生产环境插入下面的片段 google -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=[YOUR-GA-ID]"></script>
  <!-- google end -->
  </body>
</html>

也许你不知道的是,使用 create-react-app 初始化创建的工程,能仅凭短短的几行代码完成这个功能。下面我们展开看看如何完成。

军功章有 HtmlWebpackPlugin 的一半

create-react-app 自带 HtmlWebpackPlugin , webpack 会在打包过程中,使用使用默认的public/index.html作为模板并在其中插入 <script>等内容,从而生成最终的 HTML 静态文件。

由于HtmlWebpackPlugin 支持使用像ejs那样引入条件语句,如下:

<% if (condition) { %>\
    // 你想加入的 html标签
    <script src="xx/x/x/js"></script>
<% } %>

当然我们还可以使用else判断:

<% if (condition1) { %>\
    // 你想加入的 html标签1
    <script src="xx/x/1/js"></script>
<% } else if (contition2) { %>\
    // 你想加入的 html标签2
    <script src="xx/x/2/js"></script>
<% } else { %>\
    // 你想加入的 html标签3
    <script src="xx/x/3/js"></script>
<% } %>

最终在build 或者是yarn start 过程中,可以发现 HTML 已经按需求生成。

如何写判断条件

默认环境变量

回到最初的需求,我们想只在production环境下引入GoogleAnalystics,可以如下操作:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>test</title>
    <meta name="keywords" content="test"> 
    <meta name="description" content="description"/>
  </head>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  <!-- 想仅在生产环境插入下面的片段 google -->
  <% if (process.env.NODE_ENV === 'production') { %>
    // 你想加入的 html标签
    <script async src="https://www.googletagmanager.com/gtag/js?id=[YOUR-GA-ID]"></script>
<% } %>
    <script async src="https://www.googletagmanager.com/gtag/js?id=[YOUR-GA-ID]"></script>
  <!-- google end -->
  </body>
</html>

在react-create-app中,有个默认的环境变量NODE_ENV

  • 当你运行npm start时,它等于'development';
  • 当你运行npm test时,它等于'test';
  • 当你运行npm run build时,它等于'production'。 而且我们不能人为修改NODE_ENV。写判断条件时,可通过process.env.NODE_ENV去获取值。
  • 自定义环境变量

    我们也可以自定义create-react-app的环境变量

    如果在打包过程中,需要添加临时的环境变量,建议通过shell的方式:

    // package.json 的script
     "script": {
         "build:ch": "set 'REACT_APP_LANGUAGE=ch' && react-scripts build",
         "build:ru": "cross-env  REACT_APP_LANGUAGE='ru' react-scripts build"
    

    build:th是通过 cross-env 设置的环境变量REACT_APP_LANGUAGE。这样我们就可以通过REACT_APP_LANGUAGE给不同国家添加不同的[YOUR-GA-ID]了。

    <% if (process.env.REACT_APP_LANGUAGE === 'ch') { %>\ // 华语区 <script async src="https://www.googletagmanager.com/gtag/js?id=[CHINA-GA-ID]"></script> <% } else if (process.env.REACT_APP_LANGUAGE === 'ru') { %> // 俄文区 <script async src="https://www.googletagmanager.com/gtag/js?id=[RUSSIA-GA-ID]"></script> <% } %> </body> </html>

    今天,我们研究了如何根据环境变量修改index.html文件。实现这个目标很容易,只需要几行代码。这主要归功于HtmlWebPackPlugin 。该功能可以让我们面向环境的构建编写自定义脚本,从而节省时间。

    谢谢阅读! 如果这篇文章有帮助,记得一键三连。

  • html-webpack-plugin:issues
  • react-create-app环境变量
  • 分类:
    前端
    标签: