我在使用 webpack 制作 React 应用程序时遇到了困难

Question

对于我的 React 应用程序，我使用 Google Maps API 密钥作为组件，以及邮件发送库。
发送邮件所需的API密钥和密码是**不能存储在简单变量中的敏感数据**。

在生产模式，为了保护这些敏感变量，我在“public_html”文件夹外创建了一个名为“other”的文件夹。
在这个“其他”文件夹中，我创建了一个名为“.env”的文件，其中包含我的各种变量，所有变量都按照建议的“REACT_APP_”开头。
为了在我的代码中访问这些变量，我导航到“其他”文件夹并使用以下命令访问 .env 文件：

require('dotenv').config({ path: '../other/.env' });

然后我应该能够得到我的变量：

const ww = process.env.REACT_APP_COCO

但是，当我运行 npm run build 命令将应用程序部署到生产环境时，出现以下错误：

“突破性变化：webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }' - install 'os-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "os": false }"

我修改了“webpack.config.js”文件，特别是“resolve.fallback”，将“path”的值设置为 false 等，但没有任何效果。

所以，我决定通过创建一个新的应用程序来简化

• 使用“npx create-react-app nameofmyapp”，
• 使用“npm install dotenv”安装“dotenv”，
• 并在我的根目录下使用我的变量“REACT_APP_COCO=8”创建 .env 文件 应用程序（即与“公共”文件夹处于同一级别）。
• 然后， 在我的 Home 组件中，我使用“REACT_APP_COCO”访问了我的变量：

import React from 'react'

const Home = () => {
  return (
    <div>
      {process.env.REACT_APP_COCO}
    </div>
          )
     }
export default Home

至此，我的webpack没有问题和错误，显示值8。

当我想在我的主机服务器上托管这个应用程序时，问题就出现了。
所以，我加了一个区分开发环境和生产环境的条件

import React from 'react'

if(process.env.NODE_ENV==='production'){
  require('dotenv').config({ path: '../other/.env' });
}
const Home = () => {
  return (
    <div>
       {process.env.REACT_APP_COCO}
    </div>
  )
}

export default Home

然后我运行了“npm run build”命令，得到了错误：

“编译失败。找不到模块：错误：无法解析'fs' ……./node_modules/dotenv/lib”.

我运行了 npm install dotenv@latest 但我仍然收到有关为“os”模块包含一个 polyfill 的消息。

然后我尝试使用以下代码修改“webpack.config.js”文件：

module.exports = {
// ...
resolve: {
fallback: {
"fs": false,
"os": false,
"path":false
},
},
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
],
};

但我仍然得到同样的错误。我一直在寻找解决方案三个多小时，但找不到。这是一个阻塞问题，因为我需要访问包含我的 .env 文件的“其他”文件夹，该文件包含我使用 Google 地图所需的 API 密钥。 我已经尽可能地简化了问题，以便您可以有效地帮助我。我急切地等待着你的建议，因为我被困住了，找不到解决方案。

Drarig29 解决方案 =>
我做了什么：

const Dotenv = require('dotenv-webpack');
module.exports = {
    resolve: {
        fallback: {
        "fs": false,
        "os": false,
        "path":false
        },
        },
  // ...

  plugins: [
    new Dotenv({
        path: process.env.NODE_ENV === 'production' ? '../other/.env' : '.env',
    })
  ],
};

我得到同样的错误：
找不到模块：错误：无法解析 '.......node_modules/dotenv/lib' 中的 'fs'

Answer 1

您不能在 Webpack 中单独使用

dotenv

，因为它使用文件系统在运行时读取文件。这在浏览器中是不可能的。

您应该改用dotenv-webpack（您可以卸载

dotenv

，因为

dotenv

包含在

dotenv-webpack

中）。

您需要将此插件添加到您的

webpack.config.js

(docs).

有了这个插件，你不会再在你的代码中做任何

require('dotenv').config()

，而是在

webpack.config.js

中做。

要在生产环境中加载不同的文件，您可以执行以下操作：

plugins: [
  new Dotenv({
    path: process.env.NODE_ENV === 'production' ? '../../path/to/other.env' : '.env',
  })
]

这是一个看起来不错的教程：https://prateeksurana.me/blog/using-environment-variables-with-webpack/

一旦配置正确，

process.env.{variable_name}

的所有使用都将替换为生成的包中

{variable_name}

的实际值。