chore: use UMD bundling in customizer

Note: this also ensure that no ES6 code is used in JavaScript gulp task

diff --git a/gulp/tasks/customizer.js b/gulp/tasks/customizer.js
index 4d41800f1ae3f441ba05b0d79f2d59fd4bb03cc9..5ef6aec0ff3ef384c5aeb2005fc66e4519d7870c 100644 (file)
--- a/gulp/tasks/customizer.js
+++ b/gulp/tasks/customizer.js
@@ -25,6 +25,7 @@ var webpackStream = require('webpack-stream');
 var webpack2 = require('webpack');
 var named = require('vinyl-named');
 
+var utils = require('../utils.js');
 
 var ARGS = yargs.argv;
 var FOUNDATION_VERSION = require('../../package.json').version;
@@ -38,18 +39,26 @@ var CUSTOMIZER_CONFIG;
 var MODULE_LIST;
 var VARIABLE_LIST;
 
-var WEBPACK_MODULE_CONFIG = {
-  rules: [
-    {
-      test: /.js$/,
-      use: [
-        {
-          loader: 'babel-loader'
-        }
-      ]
-    }
-  ]
-}
+var WEBPACK_CONFIG = {
+  externals: utils.umdExternals({
+    'jquery': 'jQuery'
+  }),
+  module: {
+    rules: [
+      {
+        test: /.js$/,
+        use: [
+          {
+            loader: 'babel-loader'
+          }
+        ]
+      }
+    ]
+  },
+  output: {
+    libraryTarget: 'umd',
+  }
+};
 
 // Load the configuration file for the customizer. It's a list of modules to load and Sass variables to override
 gulp.task('customizer:loadConfig', function(done) {
@@ -113,7 +122,7 @@ gulp.task('customizer:javascript-entry', ['customizer:loadConfig'], function() {
 
 gulp.task('customizer:javascript', ['customizer:javascript-entry'], function() {
   return gulp.src(path.join(OUTPUT_DIR, 'js/vendor/foundation.js'))
-    .pipe(webpackStream({externals: {jquery: 'jQuery'}, module: WEBPACK_MODULE_CONFIG}, webpack2))
+    .pipe(webpackStream(WEBPACK_CONFIG, webpack2))
     .pipe(rename('foundation.js'))
     .pipe(gulp.dest(path.join(OUTPUT_DIR, 'js/vendor')))
     .pipe(uglify())

diff --git a/gulp/tasks/javascript.js b/gulp/tasks/javascript.js
index 6d152d7e0dc2ef4d66de22b70415a62af41b58f8..51bc590f0137021b8134b160b2938af7c749e641 100644 (file)
--- a/gulp/tasks/javascript.js
+++ b/gulp/tasks/javascript.js
@@ -7,6 +7,7 @@ var webpackStream = require('webpack-stream');
 var webpack2 = require('webpack');
 var named = require('vinyl-named');
 
+var utils = require('../utils.js');
 var CONFIG = require('../config.js');
 
 // ----- WEBPACK CONFIGURATION -----
@@ -17,29 +18,12 @@ var CONFIG = require('../config.js');
 // (just throw in foundation.js or foundation.min.js) or you should be using a build
 // system.
 
-// Convert an external config object for UMD modules
-// See: https://webpack.js.org/configuration/externals/#object
-function umdExternals(externals, options) {
-  options = Object.assign({ namespace: '' }, options);
-  const umdExternalPath = (...args) => [...args].filter(v => v && !!v.length);
-
-  return Object.keys(externals).reduce(function(obj, k) {
-    obj[k] = {
-      root: umdExternalPath(options.namespace, externals[k]),
-      amd: k,
-      commonjs: k,
-      commonjs2: k,
-    };
-    return obj;
-  }, {});
-};
-
 // Generate plugin Externals config for UMD modules
-const webpackExternalPlugins = Object.assign(
-  umdExternals({
+var webpackExternalPlugins = Object.assign(
+  utils.umdExternals({
     'jquery': 'jQuery',
   }),
-  umdExternals({
+  utils.umdExternals({
     // Import path                    | Exported file
     './foundation.core':              'foundation.core',
     './foundation.core.utils':        'foundation.core',
@@ -61,13 +45,13 @@ const webpackExternalPlugins = Object.assign(
   }, { namespace: CONFIG.JS_BUNDLE_NAMESPACE })
 );
 
-const webpackOutputAsExternal = {
+var webpackOutputAsExternal = {
   library: [CONFIG.JS_BUNDLE_NAMESPACE, '[name]'],
   libraryTarget: 'umd',
 };
 
 var webpackConfig = {
-  externals: umdExternals({
+  externals: utils.umdExternals({
     'jquery': 'jQuery'
   }),
   module: {

diff --git a/gulp/utils.js b/gulp/utils.js
new file mode 100644 (file)
index 0000000..8c4ccea
--- /dev/null
+++ b/gulp/utils.js
@@ -0,0 +1,20 @@
+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
+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,
+    };
+    return obj;
+  }, {});
+};
+