Angularjs 如何将.env文件变量传递到Web包配置？

我是webpack新手，几乎完成了所有的构建部分，但现在的问题是我想将环境变量从.env文件传递到webpack config，这样我就可以通过

webpack.DefinePlugin

插件将这些变量传递到构建文件中

目前，我能够将环境变量直接从网页传递到我的构建中。请看下面我在网页中使用的代码

new webpack.DefinePlugin({
            "API_URL": JSON.stringify("http://my-api.com"),
            "FRONT_END_API_KEY" : "MYFRONTENDKEYGOESHERE"
        }),

我的

package.json

构建脚本是

"scripts": {
    "start": "NODE_ENV=development webpack-dev-server --progress --port 8000 --content-base app/build/src"
    } 

---

我无法评论以澄清任何信息，因此我对答案表示歉意

你可以做：

var env = require('.env');

然后

---

但是我对您的.env文件及其使用此答案设置的方式进行了假设

您可以为此使用

dotenv

包

参考：

在webpack配置文件的顶部，需要dotenv，如下所示（当前设置.env路径）

在网页包配置插件部分使用

new webpack.DefinePlugin({
            "process.env": dotenv.parsed
        }),

现在，您可以在整个应用程序中使用env变量。尝试

console.log（process.env）你的应用程序中的代码
来自网页：

webpack命令行环境选项--env允许您传递
在任意多的环境变量中。环境变量
将可在您的webpack.config.js中访问。例如
--env.production或--env.NODE_env=local（NODE_env通常用于定义环境类型，请参见此处）

在您的
package.json中

webpack --env.NODE_ENV=local --env.production --progress

在
webpack.config.js中

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV) // 'local'
  console.log('Production: ', env.production) // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }

module.exports=env=>{
//在此处使用环境：
console.log（'NODE_ENV:'，ENV.NODE_ENV）/'local'
console.log（'Production:'，env.Production）//true
返回{
条目：'./src/index.js'，
输出：{
文件名：“bundle.js”，
path:path.resolve（uu dirname，'dist'）
}
它与您的情况不完全匹配（尽管部分匹配），但我发现这个公式最适合我

我使用了两个lib的组合：读取
webpack.config.js
（配置）需要的
.env
文件，以及验证（基于
.env.example
文件）和将所有变量从.env文件传递到应用程序代码：

我的
webpack.config.js的一部分
：

// this is to load env vars for this config
require('dotenv').config({ // it puts the content to the "process.env" var. System vars are taking precedence
    path: '.env.webpack',
});
// and this to pass env vars to the JS application
const DotenvPlugin = require('webpack-dotenv-plugin');

插件部分：

plugins: [
    // ...
    new DotenvPlugin({ // makes vars available to the application js code
        path: '.env.webpack',
        sample: '.env.webpack.example',
        allowEmptyValues: true,
    }),
    // ...
]

我发现的最简单的解决方案是使用这个npm包：

创建一个.env文件

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
...
plugins: [
new Dotenv()
]
...
};

// file1.js
console.log(process.env.DB_HOST);
// '127.0.0.1'
Resulting bundle
// bundle.js
console.log('127.0.0.1');

将其添加到您的网页配置文件中

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
...
plugins: [
new Dotenv()
]
...
};

// file1.js
console.log(process.env.DB_HOST);
// '127.0.0.1'
Resulting bundle
// bundle.js
console.log('127.0.0.1');

在代码中使用

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
...
plugins: [
new Dotenv()
]
...
};

// file1.js
console.log(process.env.DB_HOST);
// '127.0.0.1'
Resulting bundle
// bundle.js
console.log('127.0.0.1');

webpack+dotenv
我确实从公认的答案中得到了灵感，但它对我不起作用。也许dotenv的API已经改变了

以下是我的作品

import dotenv from 'dotenv'
import { DefinePlugin } from 'webpack'


...

plugins: [
    new DefinePlugin({
      'process.env': JSON.stringify(dotenv.config().parsed)
    })
]

...

首先

看起来您正试图将秘密传递给一个有角度的应用程序

客户端（浏览器）javascript中没有“秘密”这样的东西！！！

传递到
DefinePlugin
中的任何内容都可以用最小的努力提取出来

现在我们已经澄清了

Webpack现在有了，这使得将env变量传递到GlobalDefine插件变得更容易。从文档：

new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG']);

这相当于以下DefinePlugin应用程序：

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
});

如果使用
dotenv
管理环境变量，则可以使用

它只包含代码中引用的变量，所以只要你不引用你的秘密，它们就不会被包括在内。
好主意！我以前没想过访问
dotenv
的
parsed
值。我尝试过这个解决方案，但对于字符串变量，它会返回一个对象而不是字符串。例如，如果我让DB_USERNAME=MY_USRNAME，然后我尝试console.log（process.env.DB_USERNAME），它为我提供了我的_USRNAME对象，而不是“MY_USRNAME”。我使用的是dotenv 5.0.0。我如何解决它？我必须使用
json.stringify（dotenv.parsed）
将解析后的dotenv转换为有效的json字符串，这样才能工作。您也可以让它更具体一些，然后执行
“process.env.YOUR_VARIABLE”：dotenv.parsed.YOUR_VARIABLE“
以避免处理整个对象。我在webpack.config.js中只需要一个变量。行
“process.env”：JSON.stringify（dotenv.parsed）
只传递了在.env文件中定义的变量，丢失了shell中设置的所有env变量。我必须要求使用dotenv，然后传递实际的process.env，例如：
“process.env”：JSON.stringify（process.env）
为什么要串接
API\u URL
？为什么不同时串接
SECRET\u KEY
？您能详细说明您在做什么假设吗？这个解决方案看起来很有趣，因为您在webpack.config文件中公开了变量的值我有这个精确的设置，不幸的是
dotenv webpack
插件不会将这些变量传递到
webpack.config.js
文件，只传递生产代码。它与me man一起工作，似乎您遗漏了一些东西。事实并非如此。如果您试图在webpack.js文件中使用这些变量，那么最初的问题是关于
webpack.config.js
文件中存储的配置变量，不是通过CLI传递的，所以这不会很好地工作。真的吗？！这里没有人会解决明显的问题吗？如果你将一个秘密传递给DefinePlugins，它就不再是秘密了！！！只传递你可以公开的环境变量。@NSjonas前端环境中不应该定义安全配置值。前端环境中使用的配置值可以被任何人截获。无论您将其保存在客户端的何处。如果您将其保存在客户端，则任何具有基本编程技能的人都可以找到它。此外，前端不应保存任何安全机密。env必须在服务器端env中处理。如今，所有现代应用程序解决方案都提供前端和后端安全ts分别与域验证和所有。例如：pusher、send bird等。如果我错了，请纠正我。@RameezRami是的……我的观点是，这些解决方案都没有指出t