在使用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>
<script async src="https://www.googletagmanager.com/gtag/js?id=[YOUR-GA-ID]"></script>
</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>
<% 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>
</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
的方式:
"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环境变量