chore: fix plugins UMD external names

Make the plugins looking for "./plugin" instead of "plugin" for AMD/CommonJs formats
ncoden · Nov 29, 2018 · 4d9270f · 4d9270f
1 parent 618c95c
commit 4d9270f
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 30 deletions.
diff --git a/gulp/tasks/javascript.js b/gulp/tasks/javascript.js
@@ -19,28 +19,32 @@ var CONFIG = require('../config.js');
 // Generate plugin Externals config for UMD modules
 var webpackExternalPlugins = Object.assign(
   utils.umdExternals({
-    'jquery': 'jQuery',
+    // Use the global jQuery object "jQuery" in module-less environments.
+    'jquery': { root: 'jQuery' },
   }),
   utils.umdExternals({
-    // Import path                    | Exported file
-    './foundation.core':              'foundation.core',
-    './foundation.core.utils':        'foundation.core',
-    './foundation.core.plugin':       'foundation.core',
-    './foundation.util.imageLoader':  'foundation.util.imageLoader',
-    './foundation.util.keyboard':     'foundation.util.keyboard',
-    './foundation.util.mediaQuery':   'foundation.util.mediaQuery',
-    './foundation.util.motion':       'foundation.util.motion',
-    './foundation.util.nest':         'foundation.util.nest',
-    './foundation.util.timer':        'foundation.util.timer',
-    './foundation.util.touch':        'foundation.util.touch',
-    './foundation.util.box':          'foundation.util.box',
-    './foundation.dropdownMenu':      'foundation.dropdownMenu',
-    './foundation.drilldown':         'foundation.drilldown',
-    './foundation.accordionMenu':     'foundation.accordionMenu',
-    './foundation.accordion':         'foundation.accordion',
-    './foundation.tabs':              'foundation.tabs',
-    './foundation.smoothScroll':      'foundation.smoothScroll',
-  }, { namespace: CONFIG.JS_BUNDLE_NAMESPACE })
+    // Module import path             | External source path/name
+    './foundation.core':              './foundation.core',
+    './foundation.core.utils':        './foundation.core',
+    './foundation.core.plugin':       './foundation.core',
+    './foundation.util.imageLoader':  './foundation.util.imageLoader',
+    './foundation.util.keyboard':     './foundation.util.keyboard',
+    './foundation.util.mediaQuery':   './foundation.util.mediaQuery',
+    './foundation.util.motion':       './foundation.util.motion',
+    './foundation.util.nest':         './foundation.util.nest',
+    './foundation.util.timer':        './foundation.util.timer',
+    './foundation.util.touch':        './foundation.util.touch',
+    './foundation.util.box':          './foundation.util.box',
+    './foundation.dropdownMenu':      './foundation.dropdownMenu',
+    './foundation.drilldown':         './foundation.drilldown',
+    './foundation.accordionMenu':     './foundation.accordionMenu',
+    './foundation.accordion':         './foundation.accordion',
+    './foundation.tabs':              './foundation.tabs',
+    './foundation.smoothScroll':      './foundation.smoothScroll',
+  }, {
+    // Search for the module in this global variable in module-less environments.
+    namespace: CONFIG.JS_BUNDLE_NAMESPACE
+  })
 );
 
 var webpackOutputAsExternal = {
@@ -51,7 +55,8 @@ var webpackOutputAsExternal = {
 var webpackConfig = {
   mode: 'development',
   externals: utils.umdExternals({
-    'jquery': 'jQuery'
+    // Use the global jQuery object "jQuery" in module-less environments.
+    'jquery': { root: 'jQuery' },
   }),
   module: {
     rules: [

diff --git a/gulp/utils.js b/gulp/utils.js
@@ -2,19 +2,43 @@ function arrayClear(array) {
   return array.filter(function (v) { return !!v });
 }
 
-// Convert an external config object for UMD modules
-// See: https://webpack.js.org/configuration/externals/#object
+/**
+ * Return the import path/name of an UMD module for the given module format.
+ *
+ * @param {string} name - name of the module, used if other no import path/name can be found.
+ * @param {object|string} config - external configuration.
+ *  If a path/name string, used as it.
+ *  If an object, use the property within it according to the given `format`.
+ * @param {string} format - format of the module to look for, if the configuration is an object.
+ *
+ * @return The found import path/name for the module.
+ */
+function getUmdEntry(name, config, format) {
+  if (typeof config === 'string') {
+    return config;
+  }
+  if (typeof config === 'object' && config[name]) {
+    return config[format];
+  }
+  return name;
+}
+
 module.exports.umdExternals = function(externals, options) {
   options = Object.assign({ namespace: '' }, options);
 
-  return Object.keys(externals).reduce(function(obj, k) {
-    obj[k] = {
-      root: arrayClear([options.namespace, externals[k]]),
-      amd: k,
-      commonjs: k,
-      commonjs2: k,
+  var config = {};
+
+  Object.keys(externals).forEach(function (name) {
+    var entryConfig = externals[name];
+
+    config[name] = {
+      root:       arrayClear([ options.namespace, getUmdEntry(name, entryConfig, 'root') ]),
+      amd:        getUmdEntry(name, entryConfig, 'amd'),
+      commonjs:   getUmdEntry(name, entryConfig, 'commonjs'),
+      commonjs2:  getUmdEntry(name, entryConfig, 'commonjs2'),
     };
-    return obj;
   }, {});
+
+  return config;
 };