build bootstrap in esm

build/rollup.config.js

@@ -6,8 +6,10 @@ const resolve = require('rollup-plugin-node-resolve')
 const banner = require('./banner.js')
 
 const BUNDLE = process.env.BUNDLE === 'true'
+const ESM = process.env.ESM === 'true'
 
-let fileDest = 'bootstrap.js'
+let fileDest = `bootstrap${ESM ? '.esm' : ''}.js`
+const indexPath = ESM ? '../js/index.esm.js' : '../js/index.umd.js'
 const external = ['popper.js']
 const plugins = [
   babel({
@@ -28,22 +30,27 @@ const globals = {
 }
 
 if (BUNDLE) {
-  fileDest = 'bootstrap.bundle.js'
+  fileDest = `bootstrap${ESM ? '.esm' : ''}.bundle.js`
   // Remove last entry in external array to bundle Popper
   external.pop()
   delete globals['popper.js']
   plugins.push(resolve())
 }
 
-module.exports = {
+const rollupConfig = {
-  input: path.resolve(__dirname, '../js/src/index.js'),
+  input: path.resolve(__dirname, indexPath),
   output: {
     banner,
     file: path.resolve(__dirname, `../dist/js/${fileDest}`),
-    format: 'umd',
+    format: ESM ? 'esm' : 'umd',
-    globals,
+    globals
-    name: 'bootstrap'
   },
   external,
   plugins
 }
+
+if (!ESM) {
+  rollupConfig.output.name = 'bootstrap'
+}
+
+module.exports = rollupConfig

js/index.esm.js

@@ -0,0 +1,32 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v4.3.1): index.esm.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import Alert from './src/alert'
+import Button from './src/button'
+import Carousel from './src/carousel'
+import Collapse from './src/collapse'
+import Dropdown from './src/dropdown'
+import Modal from './src/modal'
+import Popover from './src/popover'
+import ScrollSpy from './src/scrollspy'
+import Tab from './src/tab'
+import Toast from './src/toast'
+import Tooltip from './src/tooltip'
+
+export {
+  Alert,
+  Button,
+  Carousel,
+  Collapse,
+  Dropdown,
+  Modal,
+  Popover,
+  ScrollSpy,
+  Tab,
+  Toast,
+  Tooltip
+}

js/index.umd.js

@@ -0,0 +1,32 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v4.3.1): index.umd.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import Alert from './src/alert'
+import Button from './src/button'
+import Carousel from './src/carousel'
+import Collapse from './src/collapse'
+import Dropdown from './src/dropdown'
+import Modal from './src/modal'
+import Popover from './src/popover'
+import ScrollSpy from './src/scrollspy'
+import Tab from './src/tab'
+import Toast from './src/toast'
+import Tooltip from './src/tooltip'
+
+export default {
+  Alert,
+  Button,
+  Carousel,
+  Collapse,
+  Dropdown,
+  Modal,
+  Popover,
+  ScrollSpy,
+  Tab,
+  Toast,
+  Tooltip
+}

js/src/index.js

@@ -1,32 +0,0 @@
-/**
- * --------------------------------------------------------------------------
- * Bootstrap (v4.3.1): index.js
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- * --------------------------------------------------------------------------
- */
-
-import Alert from './alert'
-import Button from './button'
-import Carousel from './carousel'
-import Collapse from './collapse'
-import Dropdown from './dropdown'
-import Modal from './modal'
-import Popover from './popover'
-import ScrollSpy from './scrollspy'
-import Tab from './tab'
-import Toast from './toast'
-import Tooltip from './tooltip'
-
-export {
-  Alert,
-  Button,
-  Carousel,
-  Collapse,
-  Dropdown,
-  Modal,
-  Popover,
-  ScrollSpy,
-  Tab,
-  Toast,
-  Tooltip
-}

js/tests/integration/bundle.js

@@ -1,7 +1,9 @@
 import 'popper.js'
-import bootstrap from '../../../dist/js/bootstrap'
+import {
+  Tooltip
+} from '../../../dist/js/bootstrap.esm.js'
 
 window.addEventListener('load', () => {
   [...document.querySelectorAll('[data-toggle="tooltip"]')]
-    .map(tooltipNode => new bootstrap.Tooltip(tooltipNode))
+    .map(tooltipNode => new Tooltip(tooltipNode))
 })

js/tests/integration/rollup.bundle.js

@@ -1,7 +1,6 @@
 /* eslint-env node */
 
 const resolve = require('rollup-plugin-node-resolve')
-const commonjs = require('rollup-plugin-commonjs')
 const babel = require('rollup-plugin-babel')
 
 module.exports = {
@@ -12,7 +11,6 @@ module.exports = {
   },
   plugins: [
     resolve(),
-    commonjs(),
     babel({
       exclude: 'node_modules/**'
     })

package-lock.json

@@ -5913,15 +5913,6 @@
         "yallist": "^2.1.2"
       }
     },
-    "magic-string": {
-      "version": "0.25.2",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.2.tgz",
-      "integrity": "sha512-iLs9mPjh9IuTtRsqqhNGYcZXGei0Nh/A4xirrsqW7c+QhKVFL2vm7U09ru6cHRD22azaP/wMDgI+HCqbETMTtg==",
-      "dev": true,
-      "requires": {
-        "sourcemap-codec": "^1.4.4"
-      }
-    },
     "make-dir": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
@@ -8168,26 +8159,6 @@
         "rollup-pluginutils": "^2.3.0"
       }
     },
-    "rollup-plugin-commonjs": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.2.1.tgz",
-      "integrity": "sha512-X0A/Cp/t+zbONFinBhiTZrfuUaVwRIp4xsbKq/2ohA2CDULa/7ONSJTelqxon+Vds2R2t2qJTqJQucKUC8GKkw==",
-      "dev": true,
-      "requires": {
-        "estree-walker": "^0.5.2",
-        "magic-string": "^0.25.1",
-        "resolve": "^1.10.0",
-        "rollup-pluginutils": "^2.3.3"
-      },
-      "dependencies": {
-        "estree-walker": {
-          "version": "0.5.2",
-          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.5.2.tgz",
-          "integrity": "sha512-XpCnW/AE10ws/kDAs37cngSkvgIR8aN3G0MS85m7dUpuK2EREo9VJ00uvw6Dg/hXEpfsE1I1TvJOJr+Z+TL+ig==",
-          "dev": true
-        }
-      }
-    },
     "rollup-plugin-node-resolve": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-4.0.1.tgz",
@@ -8686,12 +8657,6 @@
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
       "dev": true
     },
-    "sourcemap-codec": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.4.tgz",
-      "integrity": "sha512-CYAPYdBu34781kLHkaW3m6b/uUSyMOC2R61gcYMWooeuaGtjof86ZA/8T+qVPPt7np1085CR9hmMGrySwEc8Xg==",
-      "dev": true
-    },
     "spdx-correct": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",

package.json

@@ -44,6 +44,7 @@
     "js-docs": "npm-run-all js-lint-docs js-minify-docs",
     "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-standalone-esm": "cross-env ESM=true 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": "node build/build-plugins.js",
     "js-compile-plugins-coverage": "cross-env NODE_ENV=test node build/build-plugins.js",
@@ -53,6 +54,7 @@
     "js-minify": "npm-run-all --parallel js-minify-main js-minify-docs",
     "js-minify-main": "npm-run-all js-minify-standalone js-minify-bundle",
     "js-minify-standalone": "terser --compress --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-standalone-esm": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.esm.js.map,includeSources,url=bootstrap.esm.min.js.map\" --output dist/js/bootstrap.esm.min.js dist/js/bootstrap.esm.js",
     "js-minify-bundle": "terser --compress --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",
     "js-minify-docs": "cross-env-shell terser --mangle --comments \\\"/^!/\\\" --output site/docs/$npm_package_version_short/assets/js/docs.min.js site/docs/$npm_package_version_short/assets/js/vendor/anchor.min.js site/docs/$npm_package_version_short/assets/js/vendor/clipboard.min.js site/docs/$npm_package_version_short/assets/js/vendor/bs-custom-file-input.min.js \"site/docs/$npm_package_version_short/assets/js/src/*.js\"",
     "js-test": "npm-run-all js-test-karma* js-test-integration",
@@ -84,7 +86,8 @@
   },
   "style": "dist/css/bootstrap.css",
   "sass": "scss/bootstrap.scss",
-  "main": "dist/js/bootstrap",
+  "main": "dist/js/bootstrap.js",
+  "module": "dist/js/bootstrap.esm.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/twbs/bootstrap.git"
@@ -135,7 +138,6 @@
     "qunit": "^2.9.2",
     "rollup": "^1.4.0",
     "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.1",
     "rollup-plugin-node-resolve": "^4.0.1",
     "shelljs": "^0.8.3",
     "shx": "^0.3.2",