big*_*cup 14 google-maps environment-variables gitignore reactjs webpack
我有一个反应应用程序,并使用dotenv-webpack来管理我的API密钥.
我有: - 使用API密钥创建一个.env并对其进行gitignored. - 需要并添加dotenv作为webpack.config.js中的插件.
之后,我已经能够使用process.env.api_key引用.js文件中的一个键.但我在尝试在脚本标记中的index.html中引用它时遇到问题.
index.html的:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=process.env.GOOGLEMAP_API_KEY"></script>
</head>
<body>
<div class="container"></div>
</body>
<script src="/bundle.js"></script>
</html>
我如何在这里引用process.env.API_key？
<script src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]"></script>
我尝试使用在.js文件中工作的反引号,就像这样${API_KEY},但是在.html文件中不起作用.
btz*_*tzr 11
您不能process.env直接在html.
从中创建您自己的模板index.html并将 api url 替换为参数。
简化 HTML 文件的创建以服务您的 webpack 包。
您可以让插件为您生成 HTML 文件，使用 lodash 模板提供您自己的模板或使用您自己的加载器。
HtmlWebpackPlugin允许您创建参数并将参数传递给您的模板：
const api_key = process.env.api_key;
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: 'index.js',
plugins: [
new HtmlWebpackPlugin({
inject: false,
template: './template.html',
// Pass the full url with the key!
apiUrl: `https://maps.googleapis.com/maps/api/js?key=${api_key}`,
});
]
}
在模板中，您可以访问参数：
<script src="<%= htmlWebpackPlugin.options.apiUrl %>"></script>
请参阅：编写自己的模板
这是此评论的修改答案，请阅读完整对话。
tsu*_*suz 11
如果您已经在使用 create-react-app，则可以通过更新到
<script src="https://maps.googleapis.com/maps/api/js?key=%REACT_APP_API_KEY%"></script>
这是记录在这里
您可以使用的简单方法
在 HTML 中
<p>%NODE_ENV%</p>
并在脚本中
<script>
if('%NODE_ENV%' === 'production') {
.... some code
}
</script>
小智 2
我将以下代码放在地图渲染的 componentWillMount 中并且它起作用（至少在开发中： const API_KEY = process.env.GOOGLEMAP_API_KEY; const script = document.createElement('script'); script.src = https://maps .googleapis.com/maps/api/js?key= ${API_KEY}; document.head.append(script);
我能够使用 bigmugcup 在上面的评论中发布的代码来使其工作。我没有修改 webpack.config.js 文件。