Skip to content

Commit 01201bb

Browse files
author
Pooya Parsa
committed
🍷 Rollup, more variants and easier usage
1 parent bd0d1fe commit 01201bb

15 files changed

+756
-194
lines changed

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
node_modules/
22
*.log
33
/dist
4-
/build
54
*.iml
65
.idea
76
.nuxt

‎.npmignore

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
docs
2-
scripts
2+
build
33
.nuxt
44
.idea
55
.circleci
6-
nuxt.config.js
76
*.iml
87
banner.png
98
.npmignore

‎README.md

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,34 +33,63 @@
3333
# Getting started
3434
Please refer to [Official Documentation](https://bootstrap-vue.github.io) for setup guide, examples and documentation.
3535

36-
**NPM**
36+
**NPM (Webpack, Rollup)**
3737

3838
Get it via your favorite package manager:
3939
```bash
40-
$ yarn add bootstrap-vue
41-
# OR
42-
$ npm i bootstrap-vue
40+
# Using YARN
41+
yarn add bootstrap-vue
42+
43+
# Using NPM
44+
npm install --save bootstrap-vue
4345
```
4446

45-
Register components:
47+
Then register components in your app entrypoint:
4648
```js
4749
import Vue from 'vue'
48-
import BootstrapVue from 'bootstrap-vue';
4950

50-
// Globally register bootstrap-vue components
51+
// ES build is more efficient by reducing unneeded components with tree-shaking.
52+
// (Needs Webpack 2 or Rollup)
53+
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.es';
54+
55+
// Use commonjs version if es build is not working
56+
// import BootstrapVue from 'bootstrap-vue';
57+
58+
// Import styles if style-loader is available
59+
// You have to manually add css files if lines below are not working
60+
import 'bootstrap/dist/css/bootstrap.css'
61+
import 'bootstrap-vue/dist/bootstrap-vue.css'
62+
63+
// Globally register components
5164
Vue.use(BootstrapVue);
5265
```
5366

54-
**CDN**
67+
**CDN (Browser)**
68+
69+
UMD Bundle size about 86kb - <strong>~16kb gzipped</strong>
5570

56-
Simply include this inside your HTML templates:
5771
```html
58-
<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>
72+
<!-- Add this to <head> -->
73+
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
74+
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue/dist/bootstrap-vue.css"/>
75+
76+
<!-- Add this after vue.js -->
77+
<script src="//unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>
5978
```
6079

6180
**NUXT.JS**
6281

63-
If you are using [nuxt.js](https://github.com/nuxt/nuxt.js), you can register bootstrap-vue components using [nuxt helpers](https://github.com/fandogh/nuxt-helpers).
82+
If you are using [nuxt.js](https://github.com/nuxt/nuxt.js), you can easily register bootstrap-vue components using [nuxt helpers](https://github.com/fandogh/nuxt-helpers).
83+
84+
# Build variants
85+
BootstrapVue builds are using by rollup & rollup-plugin-vue. And are about 86kb(**16kb gzipped**).
86+
Choosing the best variant for your build environment helps even less bundle sizes using tree-shaking.
87+
88+
Variant | Environments | Usage
89+
------------|------------------------------|------------------------------------------------------------------------
90+
ES module | Webpack 2 / Rollup | `import bootstrap-vue from 'bootstrap-vue/dist/bootstrap-vue.es.js`
91+
Commonjs 2 | Webpack 1 / Other blunderers | `import bootstrap-vue from 'bootstrap-vue`
92+
UMD | Browser, etc | `<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>`
6493

6594
# Included components
6695

‎scripts/gh-pages renamed to ‎build/gh-pages

File renamed without changes.

‎build/rollup.config.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const fs = require('fs');
2+
const path = require('path');
3+
const vue = require('rollup-plugin-vue');
4+
const buble = require('rollup-plugin-buble');
5+
const resolve = require('rollup-plugin-node-resolve');
6+
const commonjs = require('rollup-plugin-commonjs');
7+
const CleanCSS = require('clean-css');
8+
const {name, dependencies} = require('../package.json');
9+
10+
const base = path.resolve(__dirname, '..');
11+
const dist = path.resolve(base, 'dist');
12+
13+
module.exports = {
14+
entry: path.resolve(base, 'index.js'),
15+
external: Object.keys(dependencies),
16+
moduleName: name,
17+
plugins: [
18+
vue({
19+
cssModules: {
20+
generateScopedName: '[name]__[local]'
21+
},
22+
css(style, styles, compiler){
23+
fs.writeFileSync(path.resolve(dist, `${name}.css`), new CleanCSS().minify(style).styles)
24+
}
25+
}),
26+
buble(),
27+
resolve({skip: ['vue']}),
28+
commonjs()
29+
]
30+
};

‎build/rollup.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const {rollup} = require('rollup');
2+
const config = require('./rollup.config');
3+
const path = require('path');
4+
5+
const base = path.resolve(__dirname, '..');
6+
const dist = path.resolve(base, 'dist');
7+
8+
rollup(config).then(bundle => {
9+
10+
bundle.write({
11+
format: 'cjs',
12+
dest: path.resolve(dist, config.moduleName + '.common.js'),
13+
sourceMap: true
14+
}).catch(console.error);
15+
16+
bundle.write({
17+
format: 'es',
18+
dest: path.resolve(dist, config.moduleName + '.es.js'),
19+
sourceMap: true
20+
}).catch(console.error);
21+
22+
bundle.write({
23+
format: 'umd',
24+
moduleName: config.moduleName,
25+
dest: path.resolve(dist, config.moduleName + '.js'),
26+
sourceMap: true
27+
}).catch(console.error);
28+
29+
}).catch(console.error);

‎build/webpack.config.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
const path = require('path');
2+
const Webpack = require('webpack');
3+
4+
module.exports = function conf(env) {
5+
const config = {
6+
plugins: []
7+
};
8+
9+
// Set context to root of project
10+
config.context = path.resolve('..', __dirname);
11+
12+
// Resolver config
13+
config.resolve = {
14+
extensions: ['.js', '.vue'],
15+
enforceExtension: false
16+
};
17+
18+
config.resolveLoader = {
19+
modules: config.resolve.modules
20+
};
21+
22+
// Target
23+
config.target = env.target;
24+
25+
// External dependencies
26+
config.externals = [
27+
'vue-style-loader',
28+
'vue',
29+
'tether'
30+
];
31+
32+
// Library entry
33+
config.entry = {
34+
'bootstrap-vue': path.resolve(__dirname, '../index')
35+
};
36+
37+
// Basic output config
38+
const dot = (val) => val ? ('.' + val) : '';
39+
config.output = {
40+
path: path.resolve(__dirname, '../dist'),
41+
filename: `[name]${dot(env.target)}${dot(env.libraryTarget)}.js`
42+
};
43+
44+
// Config Module Loaders
45+
config.module = {
46+
loaders: [
47+
// Vue
48+
{
49+
test: /\.vue$/,
50+
loader: 'vue-loader'
51+
},
52+
// JS
53+
{
54+
test: /\.js$/,
55+
loader: 'babel-loader',
56+
exclude: /node_modules/
57+
}
58+
]
59+
};
60+
61+
if (env === 'production' || env.production || process.env === 'production') {
62+
// Production Config
63+
config.devtool = '#source-map';
64+
65+
// Pass build environment inside bundle
66+
// This will Strip comments in Vue code & hort-circuits all Vue.js warning code
67+
config.plugins.push(new Webpack.DefinePlugin({
68+
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
69+
}));
70+
71+
// The UglifyJsPlugin will no longer put loaders into minimize mode, and the debug option has been deprecated.
72+
config.plugins.push(new Webpack.LoaderOptionsPlugin({
73+
minimize: true,
74+
debug: false
75+
}));
76+
77+
// Minify with dead-code elimination
78+
config.plugins.push(new Webpack.optimize.UglifyJsPlugin({
79+
compress: {warnings: false},
80+
sourceMap: true
81+
}));
82+
} else {
83+
// Development Config
84+
config.devtool = '#eval-source-map';
85+
}
86+
87+
return config;
88+
};

‎components/index.js

100644100755
File mode changed.

‎docs/pages/docs/index.vue

Lines changed: 34 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -17,78 +17,65 @@
1717
</p>
1818

1919
<h2>Quick start</h2>
20-
2120
<br>
22-
<b-alert :show="true">
23-
<strong>Important</strong>
24-
BootstrapVue does not ship with bootstrap css files.
25-
With both methods, you will still need to include Bootstrap's CSS.
26-
</b-alert>
2721

28-
<h3 id="cdn">CDN</h3>
29-
If you are simply including vue in your website, then the only thing to get started with bootstrap-vue
30-
components is adding this line AFTER including vue.js:
31-
<code v-code class="html">
32-
&lt;script src=&quot;https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js&quot;&gt;&lt;/script&gt;
33-
</code>
34-
35-
<br>
36-
<h3 id="npm">NPM</h3>
22+
<h3 id="npm">NPM (Webpack, Rollup)</h3>
3723
<p>
3824
If you are using module bundlers such as Webpack, Rollup, Laravel elixir, etc you may prefer directly
3925
include package into your project.
4026
To get started use <strong>yarn</strong> or <strong>npm</strong> to get latest version.
4127
</p>
4228
<code v-code class="shell">
43-
$ yarn add bootstrap-vue
29+
# Using YARN
30+
yarn add bootstrap-vue
4431

45-
# or using npm ...
46-
$ npm i bootstrap-vue@latest
47-
</code>
48-
<p>
49-
Now you have to register bootstrap-vue components inside Vue.
50-
</p>
51-
52-
<br>
53-
<h4>Option 1: use pre-compiled version to include all components</h4>
32+
# Using NPM
33+
npm install --save bootstrap-vue
34+
</code>
5435
<p>
55-
This is the simplest way, as is does not requires you having library dependencies.
56-
All package is <strong>~20kb</strong> gzipped.
36+
Then register components in your app entrypoint:
5737
</p>
5838
<code v-code class="js">
5939
import Vue from 'vue'
60-
import BootstrapVue from 'bootstrap-vue';
6140

62-
// Globally register bootstrap-vue components
41+
// ES build is more efficient by reducing unneeded components with tree-shaking.
42+
// (Needs Webpack 2 or Rollup)
43+
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.es';
44+
45+
// Use commonjs version if es build is not working
46+
// import BootstrapVue from 'bootstrap-vue';
47+
48+
// Import styles if style-loader is available
49+
// You have to manually add css files if lines below are not working
50+
import 'bootstrap/dist/css/bootstrap.css'
51+
import 'bootstrap-vue/dist/bootstrap-vue.css'
52+
53+
// Globally register components
6354
Vue.use(BootstrapVue);
6455
</code>
6556

66-
<br><br>
67-
<h4 class="text-muted">Option 2: import individual components (Not recommended)</h4>
68-
<p class="text-muted">
69-
With this option you only will require the components you need.
70-
</p>
71-
<code v-code class="js">
72-
import Vue from 'vue';
73-
import Alert from 'bootstrap-vue/components/alert.vue'
57+
<br>
7458

75-
// Register Alert component
76-
Vue.use('bAlert',Alert);
59+
<h3 id="cdn">CDN (Browser)</h3>
60+
UMD Bundle size about 86kb (<strong>~16kb gzipped</strong>)
61+
62+
<code v-code class="html">
63+
&lt;!-- Add this to &lt;head&gt; --&gt;
64+
&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css&quot;/&gt;
65+
&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;//unpkg.com/bootstrap-vue/dist/bootstrap-vue.css&quot;/&gt;
7766

78-
// OR Inside your templates:
79-
export default {
80-
&emsp; components: {bAlert:Alert}
81-
}
67+
&lt;!-- Add this after vue.js --&gt;
68+
&lt;script src=&quot;//unpkg.com/bootstrap-vue/dist/bootstrap-vue.js&quot;&gt;&lt;/script&gt;
8269
</code>
8370

8471
</template>
8572
</layout>
8673
</template>
8774

8875
<script>
89-
import layout from '../../layouts/docs.vue';
76+
import layout from '../../layouts/docs.vue';
9077
91-
export default {
92-
components: {layout}
93-
};
78+
export default {
79+
components: {layout}
80+
};
9481
</script>

0 commit comments

Comments
 (0)