[build] Improve rollup

bootstrap-vue · Apr 2, 2017 · 269f3c1 · 269f3c1
1 parent 1daef6a
commit 269f3c1
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ import Vue from 'vue'
 import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
 
 // Use commonjs version if es build is not working
-import BootstrapVue from 'bootstrap-vue';
+// import BootstrapVue from 'bootstrap-vue';
 
 // Import styles if style-loader is available
 // You have to manually add css files if lines below are not working
@@ -68,7 +68,7 @@ Vue.use(BootstrapVue);
 
 ### CDN (Browser)
 
-Package size is about 86kb <strong>(16kb gzipped)</strong>
+Package size is about 100kb <strong>(20kb gzipped)</strong>
 
 ```html
 <!-- Add this to <head> -->
@@ -89,26 +89,40 @@ Choosing the best variant for your build environment / packager helps less bundl
 
 Variant        | Environments                 | Package path
 ---------------|------------------------------|------------------------------------------------------------------------
-**ESM Module** | Webpack 2 / Rollup           | `dist/bootstrap-vue.esm.js`
-commonjs2      | Webpack 1                    | `dist/bootstrap-vue.common.js`
+**ES Module**  | Webpack 2 / Rollup           | `dist/bootstrap-vue.esm.js`
+commonjs2      | Webpack 1 / ...              | `dist/bootstrap-vue.common.js`
 UMD            | Browser                      | `dist/bootstrap-vue.js`
 
-# Playground & Contribution
-If you want to play with bootstrap-vue components without any local setup just head to
-[BootstrapVue Playground](https://bootstrap-vue.github.io/play) and you can interactively play and test components with a fresh vue instance.
+# Contribution
 
+**Playground**
+
+If you want to play with BootstrapVue components without any local setup just head to
+[OnlinePlayground](https://bootstrap-vue.github.io/play) and you can interactively play and test components with a fresh vue instance.
 If you want to keep your changes or make PRs reporting components misbehaviour you can save them in JSFiddle and provide that link in issues. 
 
 Also if you want to hack and improve components locally, you can follow this steps:
+
+Common part:
 - Clone this repo.
 - Make sure you have node & yarn installed locally.
 - Run `yarn install` to get all dependencies installed.
+
+Playground:
 - Run `yarn docs-dev` to run local development server.
 - Head to `http://localhost:3000/play`.
 - Now you can locally make changes to components (they are located at `components` directory). 
   Changes will be applied with webpack hot-reloading without need to reload page.
 - Finally feel free to share your awesome hacks with others and opening a PR.
 
+**Inside your project**
+
+If you want to see your changes in your project instead of playground:
+- Invoke `yarn link` inside *bootstrap-vue* directory.
+- In your project run `yarn link-bootstrap-vue`
+- Run `yarn watch` inside *bootstrap-vue*
+- Now every time you change a component, a new production version will be built and ready on your project. 
+
 # License
 The MIT License (MIT) - Copyright (c) 2016-present Pooya Parsa.   
 Designed and built with all the love in the world.

diff --git a/build/rollup.config.js b/build/rollup.config.js
@@ -5,6 +5,7 @@ const buble = require('rollup-plugin-buble');
 const resolve = require('rollup-plugin-node-resolve');
 const commonjs = require('rollup-plugin-commonjs');
 const CleanCSS = require('clean-css');
+const {camelCase} = require('lodash');
 const {name, dependencies} = require('../package.json');
 
 const base = path.resolve(__dirname, '..');
@@ -25,7 +26,29 @@ module.exports = {
             }
         }),
         buble(),
-        resolve({skip: ['vue']}),
+        resolve({external: ['vue']}),
         commonjs()
+    ],
+    globals: {
+        tether: 'Tether'
+    },
+    targets: [
+        {
+            format: 'cjs',
+            moduleName: camelCase(name),
+            dest: path.resolve(dist, name + '.common.js'),
+            sourceMap: true
+        },
+        {
+            format: 'es',
+            dest: path.resolve(dist, name + '.esm.js'),
+            sourceMap: true
+        },
+        {
+            format: 'umd',
+            moduleName: camelCase(name),
+            dest: path.resolve(dist, name + '.js'),
+            sourceMap: true
+        }
     ]
 };
diff --git a/build/rollup.js b/build/rollup.js
diff --git a/package.json b/package.json
@@ -22,7 +22,8 @@
     "url": "git+https://github.com/bootstrap-vue/bootstrap-vue.git"
   },
   "scripts": {
-    "build": "node build/rollup",
+    "build": "rollup -c build/rollup.config.js",
+    "watch": "rollup -c build/rollup.config.js --watch",
     "docs-dev": "nuxt dev build",
     "docs-gen": "nuxt generate build",
     "docs-deploy": "cd scripts && ./gh-pages",
@@ -38,7 +39,7 @@
   "devDependencies": {
     "clean-css": "^4.0.10",
     "codemirror": "^5.25.0",
-    "cross-env": "^3.2.4",
+    "cross-env": "^4.0.0",
     "eslint-config-vue": "^2.0.2",
     "eslint-plugin-html": "^2.0.0",
     "eslint-plugin-vue": "^2.0.1",
@@ -52,9 +53,10 @@
     "rollup": "^0.41.6",
     "rollup-plugin-buble": "^0.15.0",
     "rollup-plugin-commonjs": "^8.0.2",
-    "rollup-plugin-node-resolve": "^2.0.0",
+    "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-uglify": "^1.0.1",
     "rollup-plugin-vue": "^2.3.1",
+    "rollup-watch": "^3.2.2",
     "vue": "2.2.5",
     "xo": "^0.18.1"
   },

diff --git a/yarn.lock b/yarn.lock
@@ -1436,9 +1436,9 @@ create-hmac@^1.1.0, create-hmac@^1.1.2:
     create-hash "^1.1.0"
     inherits "^2.0.1"
 
-cross-env@^3.2.4:
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.2.4.tgz#9e0585f277864ed421ce756f81a980ff0d698aba"
+cross-env@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-4.0.0.tgz#16083862d08275a4628b0b243b121bedaa55dd80"
   dependencies:
     cross-spawn "^5.1.0"
     is-windows "^1.0.0"
@@ -3066,6 +3066,10 @@ is-js-type@^2.0.0:
   dependencies:
     js-types "^1.0.0"
 
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+
 is-my-json-valid@^2.10.0:
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.0.tgz#f079dd9bfdae65ee2038aae8acbc86ab109e3693"
@@ -4969,6 +4973,10 @@ require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
 
+require-relative@0.8.7:
+  version "0.8.7"
+  resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
+
 require-uncached@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/require-uncached/-/require-uncached-1.0.3.tgz#4e0d56d6c9662fd31e43011c4b95aa49955421d3"
@@ -5040,12 +5048,13 @@ rollup-plugin-commonjs@^8.0.2:
     resolve "^1.1.7"
     rollup-pluginutils "^2.0.1"
 
-rollup-plugin-node-resolve@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-2.0.0.tgz#07e0ae94ac002a3ea36e8f33ca121d9f836b1309"
+rollup-plugin-node-resolve@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.0.0.tgz#8b897c4c3030d5001277b0514b25d2ca09683ee0"
   dependencies:
     browser-resolve "^1.11.0"
     builtin-modules "^1.1.0"
+    is-module "^1.0.0"
     resolve "^1.1.6"
 
 rollup-plugin-uglify@^1.0.1:
@@ -5096,6 +5105,12 @@ rollup-pluginutils@^2.0.1:
     estree-walker "^0.3.0"
     micromatch "^2.3.11"
 
+rollup-watch@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/rollup-watch/-/rollup-watch-3.2.2.tgz#5e574232e9ef36da9177f46946d8080cb267354b"
+  dependencies:
+    require-relative "0.8.7"
+
 rollup@^0.41.6:
   version "0.41.6"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.41.6.tgz#e0d05497877a398c104d816d2733a718a7a94e2a"