Webpackで環境依存変数を渡す
角度のあるアプリをgulpからwebpackに変換しようとしています。 gulpでは、NODE_ENVに応じて、gulp-preprocessを使用して、HTMLページの一部の変数（データベース名など）を置き換えます。 webpackで同様の結果を得るための最良の方法は何ですか？
これを達成するための2つの基本的な方法があります。
DefinePlugin
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
これは単に「そのまま」一致を置き換えることに注意してください。そのため、文字列はその形式になっています。あなたはそこにあるオブジェクトのようなもっと複雑な構造を持つことができますが、あなたはアイデアを得ます。
環境プラグイン
new webpack.EnvironmentPlugin(['NODE_ENV'])
EnvironmentPluginは内部的にDefinePluginを使用し、それを通して環境値をコードにマップします。より簡潔な構文.
エイリアス
あるいは、 エイリアスモジュール を介して設定を消費することもできます。消費者側からは、このようになります。
var config = require('config');
設定自体は次のようになります。
resolve: {
alias: {
config: path.join(__dirname, 'config', process.env.NODE_ENV)
}
}
process.env.NODE_ENVがdevelopmentだとしましょう。それはそれから./config/development.jsにマップするでしょう。それがマッピングされているモジュールは、次のように設定をエクスポートできます。
module.exports = {
testing: 'something',
...
};
もしあなたがcliインターフェースだけを使いたいのであれば、もう一つの選択肢として、webpackのdefineオプションを使ってください。 package.jsonに次のスクリプトを追加します。
"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"
だから私はnpm run build-productionを実行するだけです。
環境固有の変数を設定する方法についていくつかの選択肢を調べたところ、次のようになりました。
私は現在2つのwebpack設定を持っています：
webpack.production.config.js
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production'),
'API_URL': JSON.stringify('http://localhost:8080/bands')
}
}),
webpack.config.js
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('development'),
'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
}
}),
私のコードでは、私はこの（簡潔な）方法でAPI_URLの値を取得します。
const apiUrl = process.env.API_URL;
2016年11月3日編集
Webpackのドキュメントに例があります。 https://webpack.js.org/plugins/define-plugin/#usage
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
BROWSER_SUPPORTS_HTML5: true,
TWO: "1+1",
"typeof window": JSON.stringify("object")
})
ESLint を指定した場合、no-undefルールがオンになっている場合は、コード内で未定義の変数を明確に許可する必要があります。 http://eslint.org/docs/rules/no-undef このように：
/*global TWO*/
console.log('Running App version ' + TWO);
2017年9月7日編集（Create-React-App固有）
あまり設定したくない場合は、Create-React-Appを参照してください。 Create-React-App - カスタム環境変数の追加 。フードの下でCRAはとにかくWebpackを使います。
追加のプラグインなしで any コマンドライン引数 を渡すことができます webpack 2以降の--envを使用して：
webpack --config webpack.config.js --env.foo=bar
Webpack.config.jsの変数を使用します。
module.exports = function(env) {
if (env.foo === 'bar') {
// do something
}
}
EnvironmentPluginで利用可能な webpack を直接使用して、変換中にあらゆる環境変数にアクセスできます。
webpack.config.jsファイルでプラグインを宣言するだけです。
var webpack = require('webpack');
module.exports = {
/* ... */
plugins = [
new webpack.EnvironmentPlugin(['NODE_ENV'])
]
};
使用したい環境変数の名前を明示的に宣言する必要があります。
ヴァンゲリストによる 上記の投稿に対する私の編集 は承認されませんでした 、追加情報の投稿。
package.json から定義済みのバージョン番号のように値を選び、それをJavascript内の DefinePlugin からアクセスする場合。
{"version": "0.0.1"}
次に、 package.json をそれぞれの webpack.config の中にインポートし、インポート変数を使用して属性にアクセスし、次に DefinePlugin の中の属性を使用します。
const PACKAGE = require('../package.json');
const _version = PACKAGE.version;//Picks the version number from package.json
例えば、 webpack.config の特定の設定はDefinePluginにMETADATAを使用しています。
const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
Host: Host,
port: PORT,
ENV: ENV,
HMR: HMR,
RELEASE_VERSION:_version//Version attribute retrieved from package.json
});
new DefinePlugin({
'ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
'process.env': {
'ENV': JSON.stringify(METADATA.ENV),
'NODE_ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
'VERSION': JSON.stringify(METADATA.RELEASE_VERSION)//Setting it for the Scripts usage.
}
}),
TypeScriptファイル内でこれにアクセスします。
this.versionNumber = process.env.VERSION;
最も賢い方法は次のようになります。
// webpack.config.js
plugins: [
new webpack.DefinePlugin({
VERSION: JSON.stringify(require("./package.json").version)
})
]
個人的にたくさんの答えを追加するために、私は以下を好む：
const webpack = require('webpack');
const prod = process.argv.indexOf('-p') !== -1;
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
process: {
env: {
NODE_ENV: prod? `"production"`: '"development"'
}
}
}),
...
]
};
これを使用してもファンキーなenv変数やクロスプラットフォームの問題（env varsを使用）はありません。あなたがしなければならないのは、それぞれdevまたはproductionに対して通常のwebpackまたはwebpack -pを実行することです。
参照： Githubの問題
@ zer0chainの答えに似た、もう1つの答えです。ただし、区別が1つあります。
webpack -pを設定すれば十分です。
それはと同じです：
--define process.env.NODE_ENV="production"
そしてこれはと同じです
// webpack.config.js
const webpack = require('webpack');
module.exports = {
//...
plugins:[
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
};
それで、あなたはpackage.jsonノードファイルでこのような何かだけを必要とするかもしれません：
{
"name": "projectname",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"debug": "webpack -d",
"production": "webpack -p"
},
"author": "prosti",
"license": "ISC",
"dependencies": {
"webpack": "^2.2.1",
...
}
}
DefinePlugin からほんの少しのヒント。
DefinePluginを使用すると、コンパイル時に構成できるグローバル定数を作成できます。これは開発ビルドとリリースビルドの間で異なる振る舞いを許容するのに役立ちます。たとえば、ロギングが行われるかどうかを判断するためにグローバル定数を使用することができます。おそらくあなたはあなたの開発ビルドではあるがリリースビルドではログインしていない。これがDefinePluginが容易にするシナリオの一種です。
これがそうであるのであなたがwebpack --helpをタイプするかどうかあなたはチェックすることができます
Config options:
--config Path to the config file
[string] [default: webpack.config.js or webpackfile.js]
--env Enviroment passed to the config, when it is a function
Basic options:
--context The root directory for resolving entry point and stats
[string] [default: The current directory]
--entry The entry point [string]
--watch, -w Watch the filesystem for changes [boolean]
--debug Switch loaders to debug mode [boolean]
--devtool Enable devtool for better debugging experience (Example:
--devtool eval-cheap-module-source-map) [string]
-d shortcut for --debug --devtool eval-cheap-module-source-map
--output-pathinfo [boolean]
-p shortcut for --optimize-minimize --define
process.env.NODE_ENV="production"
[boolean]
--progress Print compilation progress in percentage [boolean]
答えの束に追加するには：
DefinePluginの代わりにExtendedDefinePluginを使用する
npm install extended-define-webpack-plugin --save-dev.
ExtendedDefinePluginはずっと使いやすく、文書化されています:-) link
DefinePlugin 欠けているよいドキュメントなので、実際には#define in c＃のように動作すると言って手助けをしたいと思います。
#if (DEBUG)
Console.WriteLine("Debugging is enabled.");
#endif
したがって、DefinePluginがどのように機能するのかを理解したい場合は、c＃#defineドキュメントを読んでください。 リンク
私は、Webpack 2の環境変数を設定するのに最も簡単な次の解決策を見つけました。
たとえば、webpackの設定があります。
var webpack = require('webpack')
let webpackConfig = (env) => { // Passing envirmonment through
// function is important here
return {
entry: {
// entries
},
output: {
// outputs
},
plugins: [
// plugins
],
module: {
// modules
},
resolve: {
// resolves
}
}
};
module.exports = webpackConfig;
Webpackに環境変数を追加します。
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
}),
]
プラグイン変数を定義し、それをpluginsに追加します。
new webpack.DefinePlugin({
'NODE_ENV': JSON.stringify(env.NODE_ENV || 'development')
}),
Webpackコマンドを実行するとき、引数としてenv.NODE_ENVを渡します。
webpack --env.NODE_ENV=development
// OR
webpack --env.NODE_ENV development
これで、コード内のどこからでもNODE_ENV変数にアクセスできます。
Webpack v4以降、Webpackの設定でmodeを設定するだけで（DefinePluginを介して）自動的にNODE_ENVが設定されます。 ドキュメントはこちら。
私は別の環境のために.envファイルを使用することを好みます。
- Webpack.dev.configを使用して、
env.devを.envにコピーしてルートフォルダに入れます。 - Webpack.prod.configを使用して、
env.prodを.envにコピーします。
そしてコードで
つかいます
require('dotenv').config(); const API = process.env.API ## which will store the value from .env file
これが私のために働いていて、私がjsonファイルを再利用することによって私の環境変数DRYを保つことを可能にした方法です。
let config = require('./settings.json');
if (__PROD__) {
config = require('./settings-prod.json');
}
const envVars = {};
Object.keys(config).forEach((key) => {
envVars[key] = JSON.stringify(config[key]);
});
new webpack.DefinePlugin({
'process.env': envVars
}),
私は大ファンではありません...
new webpack.DefinePlugin({
'process.env': envVars
}),
...いかなる種類のセキュリティも提供しないため。代わりに、gitignoreにWebパックを追加しない限り、秘密のものを増やすことになりますか???? ♀️より良い解決策があります。
基本的にこの設定では、コードをコンパイルすると、すべてのプロセスenv変数がコード全体から削除され、単一のprocess.env.VARはbabelプラグインtransform-inline-environment-variables PSのおかげでなくなりますたくさんの未定義になりたくないので、webpackがbabel-loaderを呼び出す前にenv.jsを呼び出してください。それがwebpackが最初に呼び出す理由です。 babel.config.jsファイルの変数の配列は、env.jsのオブジェクトと一致する必要があります。今やるべきことは1つだけです。 .envファイルを追加し、すべてのenv変数をそこに配置します。ファイルはプロジェクトのルートにあるか、必要に応じて自由に追加する必要があります。env.jsファイルに同じ場所を設定してください。また、gitignoreに追加します
const dotFiles = ['.env'].filter(Boolean);
if (existsSync(dotFiles)) {
require("dotenv-expand")(require("dotenv").config((dotFiles)));
}
Babel + webpack + ts全体を表示するには、heaw https://github.com/EnetoJara/Node-TypeScript-babel-webpack.gitから取得します
そして、同じ論理が反応と他のすべてに適用されますか????
config
---webpack.js
---env.js
src
---source code world
.env
bunch of dotFiles
env.js
"use strict";
/***
I took the main idea from CRA, but mine is more cooler xD
*/
const {realpathSync, existsSync} = require('fs');
const {resolve, isAbsolute, delimiter} = require('path');
const NODE_ENV = process.env.NODE_ENV || "development";
const appDirectory = realpathSync(process.cwd());
if (typeof NODE_ENV !== "string") {
throw new Error("falle and stuff");
}
const dotFiles = ['.env'].filter(Boolean);
if (existsSync(dotFiles)) {
require("dotenv-expand")(require("dotenv").config((dotFiles)));
}
process.env.NODE_PATH = (process.env.NODE_PATH || "")
.split(delimiter)
.filter(folder => folder && isAbsolute(folder))
.map(folder => resolve(appDirectory, folder))
.join(delimiter);
const ENETO_APP = /^ENETO_APP_/i;
module.exports = (function () {
const raw = Object.keys ( process.env )
.filter ( key => ENETO_APP.test ( key ) )
.reduce ( ( env, key ) => {
env[ key ] = process.env[ key ];
return env;
},
{
BABEL_ENV: process.env.ENETO_APP_BABEL_ENV,
ENETO_APP_DB_NAME: process.env.ENETO_APP_DB_NAME,
ENETO_APP_DB_PASSWORD: process.env.ENETO_APP_DB_PASSWORD,
ENETO_APP_DB_USER: process.env.ENETO_APP_DB_USER,
GENERATE_SOURCEMAP: process.env.ENETO_APP_GENERATE_SOURCEMAP,
NODE_ENV: process.env.ENETO_APP_NODE_ENV,
PORT: process.env.ENETO_APP_PORT,
PUBLIC_URL: "/"
} );
const stringyField = {
"process.env": Object.keys(raw).reduce((env, key)=> {
env[key]=JSON.stringify(raw[key]);
return env;
},{}),
};
return {
raw, stringyField
}
})();
プラグイントロールのないwebpackファイル
"use strict";
require("core-js");
require("./env.js");
const path = require("path");
const nodeExternals = require("webpack-node-externals");
module.exports = env => {
return {
devtool: "source-map",
entry: path.join(__dirname, '../src/dev.ts'),
externals: [nodeExternals()],
module: {
rules: [
{
exclude: /node_modules/,
test: /\.ts$/,
use: [
{
loader: "babel-loader",
},
{
loader: "ts-loader"
}
],
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "file-loader",
},
],
},
],
},
node: {
__dirname: false,
__filename: false,
},
optimization: {
splitChunks: {
automaticNameDelimiter: "_",
cacheGroups: {
vendor: {
chunks: "initial",
minChunks: 2,
name: "vendor",
test: /[\\/]node_modules[\\/]/,
},
},
},
},
output: {
chunkFilename: "main.chunk.js",
filename: "name-bundle.js",
libraryTarget: "commonjs2",
},
plugins: [],
resolve: {
extensions: ['.ts', '.js']
} ,
target: "node"
};
};
babel.config.js
module.exports = api => {
api.cache(() => process.env.NODE_ENV);
return {
plugins: [
["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-transform-classes", {loose: true}],
["@babel/plugin-external-helpers"],
["@babel/plugin-transform-runtime"],
["@babel/plugin-transform-modules-commonjs"],
["transform-member-expression-literals"],
["transform-property-literals"],
["@babel/plugin-transform-reserved-words"],
["@babel/plugin-transform-property-mutators"],
["@babel/plugin-transform-arrow-functions"],
["@babel/plugin-transform-block-scoped-functions"],
[
"@babel/plugin-transform-async-to-generator",
{
method: "coroutine",
module: "bluebird",
},
],
["@babel/plugin-proposal-async-generator-functions"],
["@babel/plugin-transform-block-scoping"],
["@babel/plugin-transform-computed-properties"],
["@babel/plugin-transform-destructuring"],
["@babel/plugin-transform-duplicate-keys"],
["@babel/plugin-transform-for-of"],
["@babel/plugin-transform-function-name"],
["@babel/plugin-transform-literals"],
["@babel/plugin-transform-object-super"],
["@babel/plugin-transform-shorthand-properties"],
["@babel/plugin-transform-spread"],
["@babel/plugin-transform-template-literals"],
["@babel/plugin-transform-exponentiation-operator"],
["@babel/plugin-proposal-object-rest-spread"],
["@babel/plugin-proposal-do-expressions"],
["@babel/plugin-proposal-export-default-from"],
["@babel/plugin-proposal-export-namespace-from"],
["@babel/plugin-proposal-logical-assignment-operators"],
["@babel/plugin-proposal-throw-expressions"],
[
"transform-inline-environment-variables",
{
include: [
"ENETO_APP_PORT",
"ENETO_APP_NODE_ENV",
"ENETO_APP_BABEL_ENV",
"ENETO_APP_DB_NAME",
"ENETO_APP_DB_USER",
"ENETO_APP_DB_PASSWORD",
],
},
],
],
presets: [["@babel/preset-env",{
targets: {
node: "current",
esmodules: true
},
useBuiltIns: 'entry',
corejs: 2,
modules: "cjs"
}],"@babel/preset-TypeScript"],
};
};