likes
comments
collection
share

写了就忘实战系列——如何让你的HTML文件随环境变量而改变在使用React-create-app开发的过程中，你也许需要

作者站长头像
站长
· 阅读数 55

使用场景

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>
  <body>
    <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">
  <head>
    <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>
  <body>
    <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 。该功能可以让我们面向环境的构建编写自定义脚本，从而节省时间。

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

参考

转载自:https://juejin.cn/post/7071175868483108872
评论
请登录