From eb81c39f2c36d88d4ebc062a2fa179980827e8be Mon Sep 17 00:00:00 2001 From: Johann-S Date: Wed, 27 Jun 2018 11:33:07 +0200 Subject: [PATCH] feat(plugins): allow to import separate plugins --- .babelrc.js | 3 +- build/build-plugins.js | 81 +++++++++++++++++++++ package-lock.json | 34 +++++---- package.json | 5 +- site/docs/4.1/getting-started/javascript.md | 4 +- site/docs/4.1/getting-started/webpack.md | 7 +- 6 files changed, 109 insertions(+), 25 deletions(-) create mode 100644 build/build-plugins.js diff --git a/.babelrc.js b/.babelrc.js index a4ef8cb6df65..3dba11bd9fba 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 000000000000..22a179066986 --- /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 b326e499836d..2c847da12c4e 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 3773070a57db..23d799e4b6ff 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 da7011e76f0c..20500c2af628 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 e8a57cf9667a..59211b075d1d 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