From 9ef53fda6856f7a782214dd90378d76e2e010d53 Mon Sep 17 00:00:00 2001 From: Ron Meldiner Date: Wed, 9 Nov 2016 16:29:37 -0800 Subject: [PATCH 1/5] add webpack-env-define-plugin --- packages/react-scripts/config/env.js | 39 -------------- .../config/webpack.config.dev.js | 23 +++++++-- .../config/webpack.config.prod.js | 29 +++++++---- packages/react-scripts/package.json | 1 + packages/webpack-env-define-plugin/README.md | 46 +++++++++++++++++ packages/webpack-env-define-plugin/index.js | 51 +++++++++++++++++++ .../webpack-env-define-plugin/package.json | 21 ++++++++ 7 files changed, 155 insertions(+), 55 deletions(-) delete mode 100644 packages/react-scripts/config/env.js create mode 100644 packages/webpack-env-define-plugin/README.md create mode 100644 packages/webpack-env-define-plugin/index.js create mode 100644 packages/webpack-env-define-plugin/package.json diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js deleted file mode 100644 index 66ba341b35..0000000000 --- a/packages/react-scripts/config/env.js +++ /dev/null @@ -1,39 +0,0 @@ -// @remove-on-eject-begin -/** - * Copyright (c) 2015-present, Facebook, Inc. - * All rights reserved. - * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. - */ -// @remove-on-eject-end - -// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be -// injected into the application via DefinePlugin in Webpack configuration. - -var REACT_APP = /^REACT_APP_/i; - -function getClientEnvironment(publicUrl) { - var processEnv = Object - .keys(process.env) - .filter(key => REACT_APP.test(key)) - .reduce((env, key) => { - env[key] = JSON.stringify(process.env[key]); - return env; - }, { - // Useful for determining whether we’re running in production mode. - // Most importantly, it switches React into the correct mode. - 'NODE_ENV': JSON.stringify( - process.env.NODE_ENV || 'development' - ), - // Useful for resolving the correct path to static assets in `public`. - // For example, . - // This should only be used as an escape hatch. Normally you would put - // images into the `src` and `import` them in code to get their paths. - 'PUBLIC_URL': JSON.stringify(publicUrl) - }); - return {'process.env': processEnv}; -} - -module.exports = getClientEnvironment; diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index c2b544cca5..cd85360f33 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -16,7 +16,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin'); var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); -var getClientEnvironment = require('./env'); +var EnvDefinePlugin = require('webpack-env-define-plugin'); var paths = require('./paths'); // Webpack uses `publicPath` to determine where the app is being served from. @@ -26,8 +26,6 @@ var publicPath = '/'; // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. var publicUrl = ''; -// Get environment variables to inject into our app. -var env = getClientEnvironment(publicUrl); // This is the development configuration. // It is focused on developer experience and fast rebuilds. @@ -196,8 +194,23 @@ module.exports = { template: paths.appHtml, }), // Makes some environment variables available to the JS code, for example: - // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`. - new webpack.DefinePlugin(env), + // if (process.env.NODE_ENV === 'development') { ... }. + new EnvDefinePlugin({ + // Grab REACT_APP_* environment variables + regex: /^REACT_APP_/i, + customVariables: { + // Useful for determining whether we’re running in production mode. + // Most importantly, it switches React into the correct mode. + 'NODE_ENV': JSON.stringify( + process.env.NODE_ENV || 'development' + ), + // Useful for resolving the correct path to static assets in `public`. + // For example, . + // This should only be used as an escape hatch. Normally you would put + // images into the `src` and `import` them in code to get their paths. + 'PUBLIC_URL': JSON.stringify(publicUrl) + } + }), // This is necessary to emit hot updates (currently CSS only): new webpack.HotModuleReplacementPlugin(), // Watcher doesn't work well if you mistype casing in a path so we use diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index e0141b851b..db29594ad8 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -18,7 +18,7 @@ var ManifestPlugin = require('webpack-manifest-plugin'); var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); var url = require('url'); var paths = require('./paths'); -var getClientEnvironment = require('./env'); +var EnvDefinePlugin = require('webpack-env-define-plugin'); function ensureSlash(path, needsSlash) { var hasSlash = path.endsWith('/'); @@ -45,14 +45,6 @@ var publicPath = ensureSlash(homepagePathname, true); // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. var publicUrl = ensureSlash(homepagePathname, false); -// Get environment variables to inject into our app. -var env = getClientEnvironment(publicUrl); - -// Assert this just to be safe. -// Development builds of React are slow and not intended for production. -if (env['process.env'].NODE_ENV !== '"production"') { - throw new Error('Production builds must have NODE_ENV=production.'); -} // This is the production configuration. // It compiles slowly and is focused on producing a fast and minimal bundle. @@ -228,10 +220,25 @@ module.exports = { } }), // Makes some environment variables available to the JS code, for example: - // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`. + // if (process.env.NODE_ENV === 'production') { ... }. // It is absolutely essential that NODE_ENV was set to production here. // Otherwise React will be compiled in the very slow development mode. - new webpack.DefinePlugin(env), + new EnvDefinePlugin({ + // Grab REACT_APP_* environment variables + regex: /^REACT_APP_/i, + customVariables: { + // Useful for determining whether we’re running in production mode. + // Most importantly, it switches React into the correct mode. + 'NODE_ENV': JSON.stringify( + process.env.NODE_ENV || 'production' + ), + // Useful for resolving the correct path to static assets in `public`. + // For example, . + // This should only be used as an escape hatch. Normally you would put + // images into the `src` and `import` them in code to get their paths. + 'PUBLIC_URL': JSON.stringify(publicUrl) + } + }), // This helps ensure the builds are consistent if source hasn't changed: new webpack.optimize.OccurrenceOrderPlugin(), // Try to dedupe duplicated modules, if any: diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index b4cad96397..6c91184ee1 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -64,6 +64,7 @@ "url-loader": "0.5.7", "webpack": "1.13.2", "webpack-dev-server": "1.16.2", + "webpack-env-define-plugin": "1.0.0", "webpack-manifest-plugin": "1.1.0", "whatwg-fetch": "1.0.0" }, diff --git a/packages/webpack-env-define-plugin/README.md b/packages/webpack-env-define-plugin/README.md new file mode 100644 index 0000000000..5ffd6a4fa7 --- /dev/null +++ b/packages/webpack-env-define-plugin/README.md @@ -0,0 +1,46 @@ +# webpack-env-define-plugin + +This package includes a webpack plugin used by [Create React App](https://github.com/facebookincubator/create-react-app). +The plugin grabs environment variables that follows a specified regex and injects them into the application using the +webpack DefinePlugin. +In addition, the plugin allows defining custom environment variables to be injected. + +## Usage in Create React App Projects + +See [webpack.config.dev.js](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js#L200) and [webpack.config.prod.js](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L234). + +## Usage Outside of Create React App + +If you want to use this webpack plugin in a project not built with Create React App, you can install it with following steps. + +First, install this package. + + ``` + npm install --save-dev webpack-env-define-plugin + ``` + +Then reference it in your webpack config: + + ```js + var EnvDefinePlugin = require('../../webpack-env-define-plugin'); + ``` + +and define it as a plugin in the webpack config plugin section: + + ```js + plugins: [ + ... + new EnvDefinePlugin({ + // Grab MY_PREFIX_* environment variables + regex: /^MY_PREFIX_/i, + customVariables: { + // Useful for determining whether we’re running in production mode. + // Most importantly, it switches React into the correct mode. + 'MY_ENV_VAR': JSON.stringify( + process.env.MY_ENV_VAR || 'default' + ) + } + }), + ... + ] + ``` diff --git a/packages/webpack-env-define-plugin/index.js b/packages/webpack-env-define-plugin/index.js new file mode 100644 index 0000000000..1cdce12874 --- /dev/null +++ b/packages/webpack-env-define-plugin/index.js @@ -0,0 +1,51 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ +'use strict'; + +const DefinePlugin = require('webpack').DefinePlugin; + +/** + * Webpack plugin to inject environment variables that pass a regex test. The plugin also support + * custom variables by passing them in the options argument + * + * @param {Object} options - The plugin configuration + * @param {string} options.regex - The regex to select the environment variables by + * @param {Object.} options.customVariables - A map that its keys are the + * custom injected environment + * variable names and its values are the variable values + * @constructor - Returns a new EnvDefinePlugin instance + */ +function EnvDefinePlugin(options) { + this.regex = options.regex || /.*/; + this.customVariables = options.customVariables || {}; +} + +/** + * Grabs environment variables that meets the regex test and prepare them to be injected into the + * application via DefinePlugin in Webpack configuration. + * @param {string} regex - The regex to select the environment variables by + * @param {Object.} customVariables - A map where its keys are the custom injected environment + * @returns {{[process.env]: *}} - A DefinePlugin configuration + */ +function getClientEnvironment(regex, customVariables) { + const processEnv = Object + .keys(process.env) + .filter(key => regex.test(key)) + .reduce((env, key) => { + env[key] = JSON.stringify(process.env[key]); + return env; + }, customVariables); + return { 'process.env': processEnv }; +} + +EnvDefinePlugin.prototype.apply = function(compiler) { + compiler.apply(new DefinePlugin(getClientEnvironment(this.regex, this.customVariables))); +}; + +module.exports = EnvDefinePlugin; diff --git a/packages/webpack-env-define-plugin/package.json b/packages/webpack-env-define-plugin/package.json new file mode 100644 index 0000000000..396ef9587d --- /dev/null +++ b/packages/webpack-env-define-plugin/package.json @@ -0,0 +1,21 @@ +{ + "name": "webpack-env-define-plugin", + "version": "1.0.0", + "description": "Webpack plugin to inject environment variables that meet a specificed pattern", + "main": "index.js", + "repository": "facebookincubator/create-react-app", + "license": "BSD-3-Clause", + "bugs": { + "url": "https://github.com/facebookincubator/create-react-app/issues" + }, + "dependencies": { + "webpack": "^1.13.3" + }, + "contributors": [ + { + "name": "Ron Meldiner", + "email": "meldiner@gmail.com", + "url": "https://github.com/meldiner" + } + ] +} From 863e640ef9aede24ef3cfea5f72f980b7f10f6c6 Mon Sep 17 00:00:00 2001 From: Ron Meldiner Date: Thu, 10 Nov 2016 22:05:48 -0800 Subject: [PATCH 2/5] add missing npm link to webpack-env-define-plugin --- tasks/e2e.sh | 1 + 1 file changed, 1 insertion(+) diff --git a/tasks/e2e.sh b/tasks/e2e.sh index 88e1fdf4e2..dd6fcf8296 100755 --- a/tasks/e2e.sh +++ b/tasks/e2e.sh @@ -150,6 +150,7 @@ npm link $root_path/packages/babel-preset-react-app npm link $root_path/packages/eslint-config-react-app npm link $root_path/packages/react-dev-utils npm link $root_path/packages/react-scripts +npm link $root_path/packages/webpack-env-define-plugin # Test the build npm run build From 35fbc21be837b1af11527ce814ce123f9f48d5f1 Mon Sep 17 00:00:00 2001 From: Ron Meldiner Date: Mon, 21 Nov 2016 21:26:08 -0800 Subject: [PATCH 3/5] move webpackEnvDefinePlugin to react-dev-utils --- packages/react-dev-utils/README.md | 32 +++++++++++++ packages/react-dev-utils/package.json | 6 ++- .../webpackEnvDefinePlugin.js} | 0 .../config/webpack.config.dev.js | 2 +- .../config/webpack.config.prod.js | 2 +- packages/react-scripts/package.json | 1 - packages/webpack-env-define-plugin/README.md | 46 ------------------- .../webpack-env-define-plugin/package.json | 21 --------- tasks/e2e.sh | 1 - 9 files changed, 38 insertions(+), 73 deletions(-) rename packages/{webpack-env-define-plugin/index.js => react-dev-utils/webpackEnvDefinePlugin.js} (100%) delete mode 100644 packages/webpack-env-define-plugin/README.md delete mode 100644 packages/webpack-env-define-plugin/package.json diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 14c69493e5..4274d79f9f 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -201,3 +201,35 @@ module.exports = { // ... } ``` + +#### `new webpackEnvDefinePlugin({regex: string, customVariables: Object.})` + +This webpack plugin grabs environment variables that follows a specified regex and injects them into the application +using the webpack DefinePlugin. +In addition, the plugin allows defining custom environment variables to be injected. + +To use first reference it in your webpack config: + + ```js + var EnvDefinePlugin = require('react-dev-utils/webpackEnvDefinePlugin'); + ``` + +and define it as a plugin in the webpack config plugin section: + + ```js + plugins: [ + ... + new EnvDefinePlugin({ + // Grab MY_PREFIX_* environment variables + regex: /^MY_PREFIX_/i, + customVariables: { + // Useful for determining whether we’re running in production mode. + // Most importantly, it switches React into the correct mode. + 'MY_ENV_VAR': JSON.stringify( + process.env.MY_ENV_VAR || 'default' + ) + } + }), + ... + ] + ``` \ No newline at end of file diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 1fe5c556c7..4e797ff0c2 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -19,7 +19,8 @@ "openBrowser.js", "prompt.js", "WatchMissingNodeModulesPlugin.js", - "webpackHotDevClient.js" + "webpackHotDevClient.js", + "webpackEnvDefinePlugin.js" ], "dependencies": { "ansi-html": "0.0.5", @@ -28,6 +29,7 @@ "html-entities": "1.2.0", "opn": "4.0.2", "sockjs-client": "1.0.3", - "strip-ansi": "3.0.1" + "strip-ansi": "3.0.1", + "webpack": "^1.13.3" } } diff --git a/packages/webpack-env-define-plugin/index.js b/packages/react-dev-utils/webpackEnvDefinePlugin.js similarity index 100% rename from packages/webpack-env-define-plugin/index.js rename to packages/react-dev-utils/webpackEnvDefinePlugin.js diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index cd85360f33..6b1205539e 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -16,7 +16,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin'); var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); -var EnvDefinePlugin = require('webpack-env-define-plugin'); +var EnvDefinePlugin = require('react-dev-utils/webpackEnvDefinePlugin'); var paths = require('./paths'); // Webpack uses `publicPath` to determine where the app is being served from. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index db29594ad8..81097fef8d 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -18,7 +18,7 @@ var ManifestPlugin = require('webpack-manifest-plugin'); var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); var url = require('url'); var paths = require('./paths'); -var EnvDefinePlugin = require('webpack-env-define-plugin'); +var EnvDefinePlugin = require('react-dev-utils/webpackEnvDefinePlugin'); function ensureSlash(path, needsSlash) { var hasSlash = path.endsWith('/'); diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 6c91184ee1..b4cad96397 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -64,7 +64,6 @@ "url-loader": "0.5.7", "webpack": "1.13.2", "webpack-dev-server": "1.16.2", - "webpack-env-define-plugin": "1.0.0", "webpack-manifest-plugin": "1.1.0", "whatwg-fetch": "1.0.0" }, diff --git a/packages/webpack-env-define-plugin/README.md b/packages/webpack-env-define-plugin/README.md deleted file mode 100644 index 5ffd6a4fa7..0000000000 --- a/packages/webpack-env-define-plugin/README.md +++ /dev/null @@ -1,46 +0,0 @@ -# webpack-env-define-plugin - -This package includes a webpack plugin used by [Create React App](https://github.com/facebookincubator/create-react-app). -The plugin grabs environment variables that follows a specified regex and injects them into the application using the -webpack DefinePlugin. -In addition, the plugin allows defining custom environment variables to be injected. - -## Usage in Create React App Projects - -See [webpack.config.dev.js](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js#L200) and [webpack.config.prod.js](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L234). - -## Usage Outside of Create React App - -If you want to use this webpack plugin in a project not built with Create React App, you can install it with following steps. - -First, install this package. - - ``` - npm install --save-dev webpack-env-define-plugin - ``` - -Then reference it in your webpack config: - - ```js - var EnvDefinePlugin = require('../../webpack-env-define-plugin'); - ``` - -and define it as a plugin in the webpack config plugin section: - - ```js - plugins: [ - ... - new EnvDefinePlugin({ - // Grab MY_PREFIX_* environment variables - regex: /^MY_PREFIX_/i, - customVariables: { - // Useful for determining whether we’re running in production mode. - // Most importantly, it switches React into the correct mode. - 'MY_ENV_VAR': JSON.stringify( - process.env.MY_ENV_VAR || 'default' - ) - } - }), - ... - ] - ``` diff --git a/packages/webpack-env-define-plugin/package.json b/packages/webpack-env-define-plugin/package.json deleted file mode 100644 index 396ef9587d..0000000000 --- a/packages/webpack-env-define-plugin/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "name": "webpack-env-define-plugin", - "version": "1.0.0", - "description": "Webpack plugin to inject environment variables that meet a specificed pattern", - "main": "index.js", - "repository": "facebookincubator/create-react-app", - "license": "BSD-3-Clause", - "bugs": { - "url": "https://github.com/facebookincubator/create-react-app/issues" - }, - "dependencies": { - "webpack": "^1.13.3" - }, - "contributors": [ - { - "name": "Ron Meldiner", - "email": "meldiner@gmail.com", - "url": "https://github.com/meldiner" - } - ] -} diff --git a/tasks/e2e.sh b/tasks/e2e.sh index dd6fcf8296..88e1fdf4e2 100755 --- a/tasks/e2e.sh +++ b/tasks/e2e.sh @@ -150,7 +150,6 @@ npm link $root_path/packages/babel-preset-react-app npm link $root_path/packages/eslint-config-react-app npm link $root_path/packages/react-dev-utils npm link $root_path/packages/react-scripts -npm link $root_path/packages/webpack-env-define-plugin # Test the build npm run build From 7962c10826a1832e3eda4f74c097ffe43706cf27 Mon Sep 17 00:00:00 2001 From: Ron Meldiner Date: Tue, 6 Dec 2016 16:04:16 -0800 Subject: [PATCH 4/5] fix documentation and NODE_ENV values in dev and prod --- packages/react-dev-utils/README.md | 9 +++------ packages/react-dev-utils/package.json | 3 +-- packages/react-scripts/config/webpack.config.dev.js | 10 +++------- .../react-scripts/config/webpack.config.prod.js | 13 ++++--------- 4 files changed, 11 insertions(+), 24 deletions(-) diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 4274d79f9f..99ace4f464 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -202,7 +202,7 @@ module.exports = { } ``` -#### `new webpackEnvDefinePlugin({regex: string, customVariables: Object.})` +#### `new EnvDefinePlugin({regex: string, customVariables: Object.})` This webpack plugin grabs environment variables that follows a specified regex and injects them into the application using the webpack DefinePlugin. @@ -223,11 +223,8 @@ and define it as a plugin in the webpack config plugin section: // Grab MY_PREFIX_* environment variables regex: /^MY_PREFIX_/i, customVariables: { - // Useful for determining whether we’re running in production mode. - // Most importantly, it switches React into the correct mode. - 'MY_ENV_VAR': JSON.stringify( - process.env.MY_ENV_VAR || 'default' - ) + // Useful for injecting static values as environment variables to the application + 'APP_NAME': 'My App' } }), ... diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 4e797ff0c2..347189b996 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -29,7 +29,6 @@ "html-entities": "1.2.0", "opn": "4.0.2", "sockjs-client": "1.0.3", - "strip-ansi": "3.0.1", - "webpack": "^1.13.3" + "strip-ansi": "3.0.1" } } diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 6b1205539e..c0241ed278 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -193,17 +193,13 @@ module.exports = { inject: true, template: paths.appHtml, }), - // Makes some environment variables available to the JS code, for example: - // if (process.env.NODE_ENV === 'development') { ... }. + // Makes some environment variables available to the JS code new EnvDefinePlugin({ // Grab REACT_APP_* environment variables regex: /^REACT_APP_/i, customVariables: { - // Useful for determining whether we’re running in production mode. - // Most importantly, it switches React into the correct mode. - 'NODE_ENV': JSON.stringify( - process.env.NODE_ENV || 'development' - ), + // Set NODE_ENV to development + 'NODE_ENV': 'development', // Useful for resolving the correct path to static assets in `public`. // For example, . // This should only be used as an escape hatch. Normally you would put diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 81097fef8d..4d177b55fc 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -219,19 +219,14 @@ module.exports = { minifyURLs: true } }), - // Makes some environment variables available to the JS code, for example: - // if (process.env.NODE_ENV === 'production') { ... }. - // It is absolutely essential that NODE_ENV was set to production here. - // Otherwise React will be compiled in the very slow development mode. + // Makes some environment variables available to the JS code new EnvDefinePlugin({ // Grab REACT_APP_* environment variables regex: /^REACT_APP_/i, customVariables: { - // Useful for determining whether we’re running in production mode. - // Most importantly, it switches React into the correct mode. - 'NODE_ENV': JSON.stringify( - process.env.NODE_ENV || 'production' - ), + // It is absolutely essential that NODE_ENV is set to production here. + // Otherwise React will be compiled in the very slow development mode. + 'NODE_ENV': 'production', // Useful for resolving the correct path to static assets in `public`. // For example, . // This should only be used as an escape hatch. Normally you would put From e82dce48b5e4d408691c168338db9fa43ffb8979 Mon Sep 17 00:00:00 2001 From: Ron Meldiner Date: Sun, 25 Dec 2016 21:37:35 -0800 Subject: [PATCH 5/5] remove webpack DefinePlugin dependency --- packages/react-dev-utils/README.md | 13 ++++++----- .../react-dev-utils/webpackEnvDefinePlugin.js | 22 ++++++++----------- .../config/webpack.config.dev.js | 8 +++---- .../config/webpack.config.prod.js | 8 +++---- 4 files changed, 24 insertions(+), 27 deletions(-) diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 99ace4f464..ecb8e94536 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -202,16 +202,17 @@ module.exports = { } ``` -#### `new EnvDefinePlugin({regex: string, customVariables: Object.})` +#### `envDefinePlugin({regex: string, customVariables: Object.})` -This webpack plugin grabs environment variables that follows a specified regex and injects them into the application +This function grabs environment variables that follows a specified regex and injects them into the application using the webpack DefinePlugin. -In addition, the plugin allows defining custom environment variables to be injected. +In addition, the function allows defining custom environment variables to be injected. To use first reference it in your webpack config: ```js - var EnvDefinePlugin = require('react-dev-utils/webpackEnvDefinePlugin'); + var webpack = require('webpack'); + var envDefinePlugin = require('react-dev-utils/webpackEnvDefinePlugin'); ``` and define it as a plugin in the webpack config plugin section: @@ -219,14 +220,14 @@ and define it as a plugin in the webpack config plugin section: ```js plugins: [ ... - new EnvDefinePlugin({ + new webpack.DefinePlugin(envDefinePlugin({ // Grab MY_PREFIX_* environment variables regex: /^MY_PREFIX_/i, customVariables: { // Useful for injecting static values as environment variables to the application 'APP_NAME': 'My App' } - }), + })), ... ] ``` \ No newline at end of file diff --git a/packages/react-dev-utils/webpackEnvDefinePlugin.js b/packages/react-dev-utils/webpackEnvDefinePlugin.js index 1cdce12874..b85e0bfbc6 100644 --- a/packages/react-dev-utils/webpackEnvDefinePlugin.js +++ b/packages/react-dev-utils/webpackEnvDefinePlugin.js @@ -8,22 +8,22 @@ */ 'use strict'; -const DefinePlugin = require('webpack').DefinePlugin; - /** - * Webpack plugin to inject environment variables that pass a regex test. The plugin also support - * custom variables by passing them in the options argument + * Generates a webpack define plugin config injecting environment variables that pass a regex test. + * The function also support custom variables by passing them in the options argument * * @param {Object} options - The plugin configuration * @param {string} options.regex - The regex to select the environment variables by * @param {Object.} options.customVariables - A map that its keys are the * custom injected environment * variable names and its values are the variable values - * @constructor - Returns a new EnvDefinePlugin instance + * @returns - Returns a webpack define plugin configuration */ -function EnvDefinePlugin(options) { - this.regex = options.regex || /.*/; - this.customVariables = options.customVariables || {}; +function envDefinePlugin(options) { + const regex = options.regex || /.*/; + const customVariables = options.customVariables || {}; + + return getClientEnvironment(regex, customVariables); } /** @@ -44,8 +44,4 @@ function getClientEnvironment(regex, customVariables) { return { 'process.env': processEnv }; } -EnvDefinePlugin.prototype.apply = function(compiler) { - compiler.apply(new DefinePlugin(getClientEnvironment(this.regex, this.customVariables))); -}; - -module.exports = EnvDefinePlugin; +module.exports = envDefinePlugin; diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index c0241ed278..8671e4388e 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -16,7 +16,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin'); var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); -var EnvDefinePlugin = require('react-dev-utils/webpackEnvDefinePlugin'); +var envDefinePlugin = require('react-dev-utils/webpackEnvDefinePlugin'); var paths = require('./paths'); // Webpack uses `publicPath` to determine where the app is being served from. @@ -194,19 +194,19 @@ module.exports = { template: paths.appHtml, }), // Makes some environment variables available to the JS code - new EnvDefinePlugin({ + new webpack.DefinePlugin(envDefinePlugin({ // Grab REACT_APP_* environment variables regex: /^REACT_APP_/i, customVariables: { // Set NODE_ENV to development - 'NODE_ENV': 'development', + 'NODE_ENV': JSON.stringify('development'), // Useful for resolving the correct path to static assets in `public`. // For example, . // This should only be used as an escape hatch. Normally you would put // images into the `src` and `import` them in code to get their paths. 'PUBLIC_URL': JSON.stringify(publicUrl) } - }), + })), // This is necessary to emit hot updates (currently CSS only): new webpack.HotModuleReplacementPlugin(), // Watcher doesn't work well if you mistype casing in a path so we use diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 4d177b55fc..b113ab012a 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -18,7 +18,7 @@ var ManifestPlugin = require('webpack-manifest-plugin'); var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); var url = require('url'); var paths = require('./paths'); -var EnvDefinePlugin = require('react-dev-utils/webpackEnvDefinePlugin'); +var envDefinePlugin = require('react-dev-utils/webpackEnvDefinePlugin'); function ensureSlash(path, needsSlash) { var hasSlash = path.endsWith('/'); @@ -220,20 +220,20 @@ module.exports = { } }), // Makes some environment variables available to the JS code - new EnvDefinePlugin({ + new webpack.DefinePlugin(envDefinePlugin({ // Grab REACT_APP_* environment variables regex: /^REACT_APP_/i, customVariables: { // It is absolutely essential that NODE_ENV is set to production here. // Otherwise React will be compiled in the very slow development mode. - 'NODE_ENV': 'production', + 'NODE_ENV': JSON.stringify('production'), // Useful for resolving the correct path to static assets in `public`. // For example, . // This should only be used as an escape hatch. Normally you would put // images into the `src` and `import` them in code to get their paths. 'PUBLIC_URL': JSON.stringify(publicUrl) } - }), + })), // This helps ensure the builds are consistent if source hasn't changed: new webpack.optimize.OccurrenceOrderPlugin(), // Try to dedupe duplicated modules, if any: