refactor common bundle to ES module syntax and move global exports to application.js

app/assets/javascripts/application.js

@@ -6,14 +6,29 @@
 /* global AwardsHandler */
 /* global Aside */
 
-// common libraries
-window.Cookies = require('js-cookie');
-window.Pikaday = require('pikaday');
-window._ = require('underscore');
-window.Dropzone = require('dropzone');
-window.Sortable = require('vendor/Sortable');
+import jQuery from 'jquery';
+import _ from 'underscore';
+import Cookies from 'js-cookie';
+import Pikaday from 'pikaday';
+import Dropzone from 'dropzone';
+import Sortable from 'vendor/Sortable';
+
+// libraries with import side-effects
 require('mousetrap');
 require('mousetrap/plugins/pause/mousetrap-pause');
+require('vendor/fuzzaldrin-plus');
+require('es6-promise').polyfill();
+
+// expose common libraries as globals (TODO: remove these)
+window.jQuery = jQuery;
+window.$ = jQuery;
+window._ = _;
+window.Cookies = Cookies;
+window.Pikaday = Pikaday;
+window.Dropzone = Dropzone;
+window.Sortable = Sortable;
+
+// shortcuts
 require('./shortcuts');
 require('./shortcuts_navigation');
 require('./shortcuts_dashboard_navigation');
@@ -189,9 +204,6 @@ require('./visibility_select');
 require('./wikis');
 require('./zen_mode');
 
-require('vendor/fuzzaldrin-plus');
-require('es6-promise').polyfill();
-
 (function () {
   document.addEventListener('beforeunload', function () {
     // Unbind scroll events
@@ -269,7 +281,7 @@ require('es6-promise').polyfill();
     $.fn.tooltip.Constructor.DEFAULTS.trigger = 'hover';
     $body.tooltip({
       selector: '.has-tooltip, [data-toggle="tooltip"]',
-      placement: function (_, el) {
+      placement: function (tip, el) {
         return $(el).data('placement') || 'bottom';
       }
     });

app/assets/javascripts/commons/bootstrap.js

-require('./jquery');
+import 'jquery';
 
-// twitter bootstrap plugins
-require('bootstrap-sass/assets/javascripts/bootstrap/affix');
-require('bootstrap-sass/assets/javascripts/bootstrap/alert');
-require('bootstrap-sass/assets/javascripts/bootstrap/dropdown');
-require('bootstrap-sass/assets/javascripts/bootstrap/modal');
-require('bootstrap-sass/assets/javascripts/bootstrap/tab');
-require('bootstrap-sass/assets/javascripts/bootstrap/transition');
-require('bootstrap-sass/assets/javascripts/bootstrap/tooltip');
+// bootstrap jQuery plugins
+import 'bootstrap-sass/assets/javascripts/bootstrap/affix';
+import 'bootstrap-sass/assets/javascripts/bootstrap/alert';
+import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown';
+import 'bootstrap-sass/assets/javascripts/bootstrap/modal';
+import 'bootstrap-sass/assets/javascripts/bootstrap/tab';
+import 'bootstrap-sass/assets/javascripts/bootstrap/transition';
+import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip';

app/assets/javascripts/commons/index.js

-require('./jquery');
-require('./bootstrap');
+import './jquery';
+import './bootstrap';

app/assets/javascripts/commons/jquery.js

-// jQuery library
-window.$ = window.jQuery = require('jquery');
+import 'jquery';
 
-// jQuery plugins
-require('jquery-ujs');
-require('vendor/jquery.endless-scroll');
-require('vendor/jquery.caret');
-require('vendor/jquery.atwho');
-require('vendor/jquery.scrollTo');
-require('vendor/jquery.nicescroll');
-require('vendor/jquery.waitforimages');
-require('select2/select2.js');
+// common jQuery plugins
+import 'jquery-ujs';
+import 'vendor/jquery.endless-scroll';
+import 'vendor/jquery.caret';
+import 'vendor/jquery.atwho';
+import 'vendor/jquery.scrollTo';
+import 'vendor/jquery.nicescroll';
+import 'vendor/jquery.waitforimages';
+import 'select2/select2';

config/webpack.config.js

@@ -87,6 +87,12 @@ var config = {
     // prevent pikaday from including moment.js
     new webpack.IgnorePlugin(/moment/, /pikaday/),
 
+    // fix legacy jQuery plugins which depend on globals
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+    }),
+
     // use deterministic module ids in all environments
     IS_PRODUCTION ?
       new webpack.HashedModuleIdsPlugin() :