web-dev-qa-db-ja.com

.envファイル変数をwebpack構成に渡す方法は？

私はwebpackを使い始めてほとんどすべてのビルドセクションを解決しましたが、問題は.envファイルからwebpack configに環境変数を渡して、webpack.DefinePluginプラグイン。

現在、環境変数を直接webpackからビルドに渡すことができます。私がwebpackで使用した以下のコードをご覧ください。

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

私のpackage.jsonビルドスクリプトは

"scripts": {
    "start": "NODE_ENV=development webpack-dev-server --progress --port 8000 --content-base app/build/src"
    }
angularjswebpackenvironment-variableswebpack-dev-serverwebpack-2
18
ninja dev

この目的のためにdotenvパッケージを使用できます

リファレンス： https://www.npmjs.com/package/dotenvhttps://github.com/motdotla/dotenv

Webpack設定ファイルの先頭で、次のようにdotenvを要求します（.envパスを正しく設定します）

_var dotenv = require('dotenv').config({path: __dirname + '/.env'});
_

webpack設定プラグインセクションで使用

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

これで、アプリ全体で環境変数を使用できます。アプリのコードでconsole.log(process.env);を試してください

34
Rameez Rami

（部分的にではありますが）あなたのケースと正確には一致しませんが、この式が私にとって最も効果的であることがわかりました。

私は2つのlibsの組み合わせを使用します： dotenv.envファイルを読み取り、webpack.config.js（構成）のニーズに対応します webpack-dotenv-plugin検証用（.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,
    }),
    // ...
]
5
Roman86

webpack + dotenv

受け入れられた答えからインスピレーションを得ましたが、それは私にとってはうまくいきません。多分dotenvのAPIが変更されました。

次の作品

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


...

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

...
3
Tyler Long

情報を明確にするためにコメントすることはできませんので、答えをお詫びします。

あなたがすることができます：

var env = require('.env');

その後

new webpack.DefinePlugin({
            "API_URL": JSON.stringify("http://my-api.com"),
            "SECRET_KEY" : "MYSECRETKEYGOESHERE",
            "env_property": env.property
        }),

しかし、私はあなたの.envファイルとこの回答でのセットアップ方法について仮定しています

2
DevinFlick

私が見つけた最も簡単な解決策は、このnpmパッケージを使用することです dotenv-webpack

。envファイルを作成します

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

Webpack設定ファイルに追加します

// 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');
0
Mahmoud Abd AL Kareem

最初に...

angularアプリケーションにシークレットを渡そうとしているようです。

クライアント側（ブラウザ）のJavaScriptには「秘密」などはありません!!!

DefinePluginに渡されたものはすべて、最小限の労力で抽出できます。

これで解決しました...

Webpackに Environment Plugin が追加され、環境変数を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 webpack plugin を使用できます。

コードで参照される変数のみが含まれるため、シークレットを参照しない限り、それらは含まれません。

0
NSjonas

Webpackから docs ：

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')
    }
0
Jalal