build bootstrap in esm

2025-01-28 20:52:21 +01:00 · 2019-03-01 11:11:41 +02:00 · 2019-03-01 11:11:41 +02:00 · 2fd50f98a5
commit 2fd50f98a5
parent 3ffe3a5d82
8 changed files with 86 additions and 80 deletions
--- a/build/rollup.config.js
+++ b/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 = {
-  input: path.resolve(__dirname, '../js/src/index.js'),
+const rollupConfig = {
+  input: path.resolve(__dirname, indexPath),
  output: {
    banner,
    file: path.resolve(__dirname, `../dist/js/${fileDest}`),
-    format: 'umd',
-    globals,
-    name: 'bootstrap'
+    format: ESM ? 'esm' : 'umd',
+    globals
  },
  external,
  plugins
 }
+
+if (!ESM) {
+  rollupConfig.output.name = 'bootstrap'
+}
+
+module.exports = rollupConfig
--- a/js/index.esm.js
+++ b/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
+}
--- a/js/index.umd.js
+++ b/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
+}
--- a/js/src/index.js
+++ b/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
-}
--- a/js/tests/integration/bundle.js
+++ b/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))
 })
--- a/js/tests/integration/rollup.bundle.js
+++ b/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/**'
    })
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",