feat(plugins): allow to import separate plugins

6 files changed, 109 insertions, 25 deletions

diff --git a/.babelrc.js b/.babelrc.js
index a4ef8cb6df..3dba11bd9f 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -10,9 +10,8 @@ module.exports = {
     ]
   ],
   plugins: [
-    process.env.PLUGINS && 'transform-es2015-modules-strip',
     '@babel/proposal-object-rest-spread'
-  ].filter(Boolean),
+  ],
   env: {
     test: {
       plugins: [ 'istanbul' ]
diff --git a/build/build-plugins.js b/build/build-plugins.js
new file mode 100644
index 0000000000..22a1790669
--- /dev/null
+++ b/build/build-plugins.js
@@ -0,0 +1,81 @@
+/*!
+ * Script to build our plugins to use them separately.
+ * Copyright 2018 The Bootstrap Authors
+ * Copyright 2018 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+'use strict'
+
+const rollup  = require('rollup')
+const path    = require('path')
+const babel   = require('rollup-plugin-babel')
+const TEST    = process.env.NODE_ENV === 'test'
+
+const plugins = [
+  babel({
+    exclude: 'node_modules/**', // Only transpile our source code
+    externalHelpersWhitelist: [ // Include only required helpers
+      'defineProperties',
+      'createClass',
+      'inheritsLoose',
+      'defineProperty',
+      'objectSpread'
+    ]
+  })
+]
+
+const format = 'umd'
+const rootPath = !TEST ? '../js/dist/' : '../js/coverage/dist/'
+const bsPlugins = {
+  Alert: path.resolve(__dirname, '../js/src/alert.js'),
+  Button: path.resolve(__dirname, '../js/src/button.js'),
+  Carousel: path.resolve(__dirname, '../js/src/carousel.js'),
+  Collapse: path.resolve(__dirname, '../js/src/collapse.js'),
+  Dropdown: path.resolve(__dirname, '../js/src/dropdown.js'),
+  Modal: path.resolve(__dirname, '../js/src/modal.js'),
+  Popover: path.resolve(__dirname, '../js/src/popover.js'),
+  ScrollSpy: path.resolve(__dirname, '../js/src/scrollspy.js'),
+  Tab: path.resolve(__dirname, '../js/src/tab.js'),
+  Tooltip: path.resolve(__dirname, '../js/src/tooltip.js'),
+  Util: path.resolve(__dirname, '../js/src/util.js')
+}
+
+Object.keys(bsPlugins)
+  .forEach((pluginKey) => {
+    console.log(`Building ${pluginKey} plugin...`)
+
+    const external = ['jquery', 'popper.js']
+    const globals = {
+      jquery: 'jQuery', // Ensure we use jQuery which is always available even in noConflict mode
+      'popper.js': 'Popper'
+    }
+
+    // Do not bundle Util in plugins
+    if (pluginKey !== 'Util') {
+      external.push(bsPlugins.Util)
+      globals[bsPlugins.Util] = 'Util'
+    }
+
+    // Do not bundle Tooltip in Popover
+    if (pluginKey === 'Popover') {
+      external.push(bsPlugins.Tooltip)
+      globals[bsPlugins.Tooltip] = 'Tooltip'
+    }
+
+    rollup.rollup({
+      input: bsPlugins[pluginKey],
+      plugins,
+      external
+    }).then((bundle) => {
+      bundle.write({
+        format,
+        name: pluginKey,
+        sourcemap: true,
+        globals,
+        file: path.resolve(__dirname, `${rootPath}${pluginKey.toLowerCase()}.js`)
+      })
+        .then(() => console.log(`Building ${pluginKey} plugin... Done !`))
+        .catch((err) => console.error(`${pluginKey}: ${err}`))
+    })
+  })
diff --git a/package-lock.json b/package-lock.json
index b326e49983..2c847da12c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1411,12 +1411,6 @@
       "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
       "dev": true
     },
-    "babel-plugin-transform-es2015-modules-strip": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-strip/-/babel-plugin-transform-es2015-modules-strip-0.1.1.tgz",
-      "integrity": "sha1-c5PwccNWod+2rAMHfgwGy1ejEl8=",
-      "dev": true
-    },
     "babel-polyfill": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.23.0.tgz",
@@ -4133,12 +4127,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4153,17 +4149,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4280,7 +4279,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4292,6 +4292,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4306,6 +4307,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4313,12 +4315,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4337,6 +4341,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4417,7 +4422,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4429,6 +4435,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4550,6 +4557,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
diff --git a/package.json b/package.json
index 3773070a57..23d799e4b6 100644
--- a/package.json
+++ b/package.json
@@ -44,8 +44,8 @@
     "js-compile": "npm-run-all --parallel js-compile-* --sequential js-copy",
     "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
     "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap",
-    "js-compile-plugins": "cross-env PLUGINS=true babel js/src/ --out-dir js/dist/ --source-maps",
-    "js-compile-plugins-coverage": "cross-env PLUGINS=true NODE_ENV=test babel js/src/ --out-dir js/coverage/dist/ --source-maps",
+    "js-compile-plugins": "node build/build-plugins.js",
+    "js-compile-plugins-coverage": "cross-env NODE_ENV=test node build/build-plugins.js",
     "js-minify": "npm-run-all --parallel js-minify-*",
     "js-minify-standalone": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
     "js-minify-bundle": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
@@ -103,7 +103,6 @@
     "autoprefixer": "^8.6.5",
     "babel-eslint": "^8.2.5",
     "babel-plugin-istanbul": "^4.1.6",
-    "babel-plugin-transform-es2015-modules-strip": "^0.1.1",
     "broken-link-checker": "^0.7.8",
     "bundlesize": "^0.15.3",
     "clean-css-cli": "^4.1.11",
diff --git a/site/docs/4.1/getting-started/javascript.md b/site/docs/4.1/getting-started/javascript.md
index da7011e76f..20500c2af6 100644
--- a/site/docs/4.1/getting-started/javascript.md
+++ b/site/docs/4.1/getting-started/javascript.md
@@ -8,7 +8,9 @@ toc: true
 
 ## Individual or compiled
 
-Plugins can be included individually (using Bootstrap's individual `*.js` files), or all at once using `bootstrap.js` or the minified `bootstrap.min.js` (don't include both).
+Plugins can be included individually (using Bootstrap's individual `js/dist/*.js`), or all at once using `bootstrap.js` or the minified `bootstrap.min.js` (don't include both).
+
+If you use a bundler (Webpack, Rollup...), you can use `/js/dist/*.js` files which are UMD ready.
 
 ## Dependencies
 
diff --git a/site/docs/4.1/getting-started/webpack.md b/site/docs/4.1/getting-started/webpack.md
index e8a57cf966..59211b075d 100644
--- a/site/docs/4.1/getting-started/webpack.md
+++ b/site/docs/4.1/getting-started/webpack.md
@@ -22,7 +22,7 @@ Alternatively, you may **import plugins individually** as needed:
 
 {% highlight js %}
 import 'bootstrap/js/dist/util';
-import 'bootstrap/js/dist/dropdown';
+import 'bootstrap/js/dist/alert';
 ...
 {% endhighlight %}
 
@@ -30,11 +30,6 @@ Bootstrap is dependent on [jQuery](https://jquery.com/) and [Popper](https://pop
 these are defined as `peerDependencies`, this means that you will have to make sure to add both of them
 to your `package.json` using `npm install --save jquery popper.js`.
 
-{% capture callout %}
-Notice that if you chose to **import plugins individually**, you must also install [exports-loader](https://github.com/webpack-contrib/exports-loader)
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
-
 ## Importing Styles
 
 ### Importing Precompiled Sass