Move @neutrinojs/env into the web preset & support default values

mkdocs.yml

@@ -54,7 +54,6 @@ pages:
     - compile-loader: './packages/compile-loader.md'
     - copy: './packages/copy.md'
     - dev-server: './packages/dev-server.md'
-    - env: './packages/env.md'
     - eslint: './packages/eslint.md'
     - font-loader: './packages/font-loader.md'
     - html-loader: './packages/html-loader.md'

packages/web/README.md

@@ -182,8 +182,8 @@ The following shows how you can pass an options object to the Web preset and ove
 module.exports = {
   use: [
     ['@neutrinojs/web', {
-      // Change options for @neutrinojs/env
-      env: [],
+      // Enables and configures `EnvironmentPlugin`. See below for example usage.
+      env: false,
 
       // Enables Hot Module Replacement. Set to false to disable
       hot: true,
@@ -300,6 +300,36 @@ module.exports = {
 };
 ```
 
+### Environment variables
+
+To use environment variables at compile time, use the `env` setting to enable and configure
+[EnvironmentPlugin](https://webpack.js.org/plugins/environment-plugin/) (`env` accepts the
+same options as the plugin). There is no need to specify `NODE_ENV`, since webpack defines
+it automatically. The environment variables can then be used via `process.env.<NAME>`.
+
+For example:
+
+```js
+['@neutrinojs/web', {
+  env: [
+    // webpack will output a warning if these are not defined in the environment.
+    'VAR_ONE',
+    'VAR_TWO',
+  ]
+}
+```
+
+Or to set default values, use the object form:
+
+```js
+['@neutrinojs/web', {
+  env: {
+    VAR_ONE: 'foo',
+    VAR_TWO: 'bar',
+  }
+}
+```
+
 ### Dev Server Proxy
 
 If you are handling requests with a server, you may want to set up a proxy for development. See webpack's [`devServer.proxy`](https://webpack.js.org/configuration/dev-server/#devserver-proxy) for all available options.
@@ -421,7 +451,7 @@ _Note: Some plugins are only available in certain environments. To override them
 
 | Name | Description | Environments and Commands |
 | --- | --- | --- |
-| `env` | Inject environment variables into source code at `process.env`, defaults to only inject `NODE_ENV`. From `@neutrinojs/env`. | all |
+| `env` | Inject environment variables into source code at `process.env`, using `EnvironmentPlugin`. | all |
 | `extract` | Extracts CSS from JS bundle into a separate stylesheet file. From `@neutrinojs/style-loader`. | all |
 | `html-sibling-chunks` | Works around `html-webpack-plugin` not supporting `splitChunks` when using multiple entrypoints, via `html-webpack-include-sibling-chunks-plugin`. | all |
 | `html-{MAIN_NAME}` | Automatically generates HTML files for configured entry points. `{MAIN_NAME}` corresponds to the entry point of each page. By default, there is only a single `index` main, so this would generate a plugin named `html-index`. From `@neutrinojs/html-template` | all |

packages/web/index.js

@@ -3,12 +3,11 @@ const styleLoader = require('@neutrinojs/style-loader');
 const fontLoader = require('@neutrinojs/font-loader');
 const imageLoader = require('@neutrinojs/image-loader');
 const compileLoader = require('@neutrinojs/compile-loader');
-const env = require('@neutrinojs/env');
 const htmlTemplate = require('@neutrinojs/html-template');
 const clean = require('@neutrinojs/clean');
 const loaderMerge = require('@neutrinojs/loader-merge');
 const devServer = require('@neutrinojs/dev-server');
-const { HotModuleReplacementPlugin } = require('webpack');
+const { EnvironmentPlugin, HotModuleReplacementPlugin } = require('webpack');
 const { resolve } = require('url');
 const merge = require('deepmerge');
 const HtmlWebpackIncludeSiblingChunksPlugin = require('html-webpack-include-sibling-chunks-plugin');
@@ -19,7 +18,7 @@ module.exports = (neutrino, opts = {}) => {
   const publicPath = opts.publicPath || './';
   const options = merge({
     publicPath,
-    env: [],
+    env: false,
     hot: true,
     html: {},
     devServer: {
@@ -97,8 +96,9 @@ module.exports = (neutrino, opts = {}) => {
     }, options.babel)
   });
 
-  if (options.env.length) {
-    neutrino.use(env, options.env);
+  if (options.env) {
+    neutrino.config.plugin('env')
+      .use(EnvironmentPlugin, [options.env]);
   }
 
   neutrino.use(htmlLoader);

packages/web/package.json

@@ -29,7 +29,6 @@
     "@neutrinojs/clean": "9.0.0-0",
     "@neutrinojs/compile-loader": "9.0.0-0",
     "@neutrinojs/dev-server": "9.0.0-0",
-    "@neutrinojs/env": "9.0.0-0",
     "@neutrinojs/font-loader": "9.0.0-0",
     "@neutrinojs/html-loader": "9.0.0-0",
     "@neutrinojs/html-template": "9.0.0-0",

packages/web/test/web_test.js

@@ -2,21 +2,22 @@ import test from 'ava';
 import { validate } from 'webpack';
 import Neutrino from '../../neutrino/Neutrino';
 
+const mw = () => require('..');
 const expectedExtensions = ['.js', '.jsx', '.vue', '.ts', '.tsx', '.mjs', '.json'];
 
 test('loads preset', t => {
-  t.notThrows(() => require('..'));
+  t.notThrows(mw);
 });
 
 test('uses preset', t => {
-  t.notThrows(() => new Neutrino().use(require('..')));
+  t.notThrows(() => new Neutrino().use(mw()));
 });
 
 test('valid preset production', t => {
   const api = new Neutrino();
 
   api.config.mode('production');
-  api.use(require('..'));
+  api.use(mw());
   const config = api.config.toConfig();
 
   // Common
@@ -40,7 +41,7 @@ test('valid preset development', t => {
   const api = new Neutrino();
 
   api.config.mode('development');
-  api.use(require('..'));
+  api.use(mw());
   const config = api.config.toConfig();
 
   // Common
@@ -64,23 +65,39 @@ test('valid preset development', t => {
   t.is(errors.length, 0);
 });
 
+test('supports env option using array form', t => {
+  const api = new Neutrino();
+
+  const env = ['VAR1', 'VAR2'];
+  api.use(mw(), { env });
+  t.deepEqual(api.config.plugin('env').get('args'), [ env ]);
+});
+
+test('supports env option using object form', t => {
+  const api = new Neutrino();
+
+  const env = { VAR: 'default-value' };
+  api.use(mw(), { env });
+  t.deepEqual(api.config.plugin('env').get('args'), [ env ]);
+});
+
 test('throws when minify.babel defined', async t => {
   const api = new Neutrino();
 
-  const err = t.throws(() => api.use(require('..'), { minify: { babel: false } }));
+  const err = t.throws(() => api.use(mw(), { minify: { babel: false } }));
   t.true(err.message.includes('The minify.babel option has been removed'));
 });
 
 test('throws when minify.image defined', async t => {
   const api = new Neutrino();
 
-  const err = t.throws(() => api.use(require('..'), { minify: { image: true } }));
+  const err = t.throws(() => api.use(mw(), { minify: { image: true } }));
   t.true(err.message.includes('The minify.image option has been removed'));
 });
 
 test('throws when minify.style defined', async t => {
   const api = new Neutrino();
 
-  const err = t.throws(() => api.use(require('..'), { minify: { style: false } }));
+  const err = t.throws(() => api.use(mw(), { minify: { style: false } }));
   t.true(err.message.includes('The minify.style option has been removed'));
 });