Move @neutrinojs/env into the web preset & support default values (#983)

Since `EnvironmentPlugin` doesn't require any non-webpack dependencies
or complex configuration, it's simpler to inline the plugin directly
in presets that use it (which is currently just the web preset).

The argument passed to the plugin is now correctly wrapped in an array
(as expected by `webpack-chain`), meaning the object form that allows
setting defaults is now also supported:
https://webpack.js.org/plugins/environment-plugin/#usage-with-default-values

Closes #657.

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'));
 });