feature #495 Fix support for Webpack externals. This fixes #471 (David Ellingsworth, Lyrkan, weaverryan)

This PR was merged into the master branch.

Discussion
----------

Fix support for Webpack externals. This fixes #471

This is an alternative to #472 which does not modify the public Encore API and requires the user to pass an array if they want to add multiple externals at a time.

Commits
-------

58dc86d tweaking example
c1fbbf3 Split the addExternals example into two separate examples.
c0a8d8d Use {*} instead of {object} for externals parameter of addExternals method.
0e012d3 Fix style issues identified by lint.
5ab6822 Include a regex in the tests of addExternals.
a51b35f Update documentation for Encore.addExternals
3d6fb55 Ensure a copy of the externals is returned when generating a Webpack config.
84a0dc0 Store externals in an array. This fixes #471

Author: Ryan Weaver

index.js

@@ -390,9 +390,19 @@ class Encore {
      *      Encore.addExternals({
      *          jquery: 'jQuery',
      *          react: 'react'
-     *      })
+     *      });
+     *
+     * Or:
+     *
+     *      const nodeExternals = require('webpack-node-externals');
+     *
+     *      Encore.addExternals(
+     *          // add any valid externals you have
+     *          nodeExternals(),
+     *          /^(jquery|\$)$/i
+     *      );
      *
-     * @param {object} externals
+     * @param {*} externals
      *
      * @returns {Encore}
      */

lib/WebpackConfig.js

@@ -47,7 +47,7 @@ class WebpackConfig {
         this.providedVariables = {};
         this.configuredFilenames = {};
         this.aliases = {};
-        this.externals = {};
+        this.externals = [];
 
         // Features/Loaders flags
         this.useVersioning = false;
@@ -299,12 +299,12 @@ class WebpackConfig {
         Object.assign(this.aliases, aliases);
     }
 
-    addExternals(externals = {}) {
-        if (typeof externals !== 'object') {
-            throw new Error('Argument 1 to addExternals() must be an object.');
+    addExternals(externals = []) {
+        if (!Array.isArray(externals)) {
+            externals = [externals];
         }
 
-        Object.assign(this.externals, externals);
+        this.externals = this.externals.concat(externals);
     }
 
     enableVersioning(enabled = true) {

lib/config-generator.js

@@ -108,7 +108,7 @@ class ConfigGenerator {
             config.resolve.alias['react-dom'] = 'preact-compat';
         }
 
-        config.externals = Object.assign({}, this.webpackConfig.externals);
+        config.externals = [...this.webpackConfig.externals];
 
         return config;
     }

test/WebpackConfig.js

@@ -940,24 +940,17 @@ describe('WebpackConfig object', () => {
         it('Adds new externals', () => {
             const config = createConfig();
 
-            expect(config.externals).to.deep.equals({});
+            expect(config.externals).to.deep.equals([]);
 
             config.addExternals({ 'jquery': 'jQuery', 'react': 'react' });
             config.addExternals({ 'lodash': 'lodash' });
+            config.addExternals(/^(jquery|\$)$/i);
 
-            expect(config.externals).to.deep.equals({
-                'jquery': 'jQuery',
-                'react': 'react',
-                'lodash': 'lodash'
-            });
-        });
-
-        it('Calling it with an invalid argument', () => {
-            const config = createConfig();
-
-            expect(() => {
-                config.addExternals('foo');
-            }).to.throw('must be an object');
+            expect(config.externals).to.deep.equals([
+                { 'jquery': 'jQuery', 'react': 'react' },
+                { 'lodash': 'lodash' },
+                /^(jquery|\$)$/i
+            ]);
         });
     });
 

test/config-generator.js

@@ -471,7 +471,7 @@ describe('The config-generator function', () => {
 
             const actualConfig = configGenerator(config);
 
-            expect(actualConfig.externals).to.deep.equals({});
+            expect(actualConfig.externals).to.deep.equals([]);
         });
 
         it('with addExternals()', () => {
@@ -485,10 +485,10 @@ describe('The config-generator function', () => {
 
             const actualConfig = configGenerator(config);
 
-            expect(actualConfig.externals).to.deep.equals({
+            expect(actualConfig.externals).to.deep.equals([{
                 'jquery': 'jQuery',
                 'react': 'react'
-            });
+            }]);
         });
     });