This is a collections of simple demos of bbpack.
These demos are purposely writtern in a simple and clear style. You will find no difficulty in following them to learn the convenient tool.
First copy the repo or directily download into your disk.
$ git clone https://github.com/wujohns/bbpack.git
Run npm install to install the dependencies
Then play with the source files under the repo's demo* directories.
- Basic Usage
- Use Libs Pack Feature
- Sourcemap, Uglify And Watch Files' Change
- Custom Browserify's transforms or plugins
- Use With Browsersync (custome afterPipes)
Change your path to demo1. Run node build, it will create dist/bundle.js which is build from src/src1.js, src/src2.js and src\style.less.
Then you can open the demo1/index.html in the browser.
The core method in this build process is the bbpack.pagesPack in demo1/build.js, this method has a param named pages which is an Array. Each element in param pages is an object, an the object structure's detail is blow:
path: After build the target file is saved in this path
parts: The entry files(the files you want to build from)
You also can build multi target file in once by add object like above
In many pages, we use the same node_modules or common js-file (here we call it lib). If using the demo1's directly pack, the different target file will pack the lib repeatly. Using libsPack method can resolve this problem. the libsPack will pack the libs into a file(ex: libs.js) and what you need do for pages is just set the externals in pagesPack method.
like that:
bbpack.libsPack({
libs: [
...
{ src: 'react', expose: 'react' }
...
],
savePath: './dist/libs.js'
});
bbpack.pagesPack({
pages: [
...
],
externals: [... 'react', ...]
});
If you want to use some convenient feature for develope of product(like sourcemap, uglify, auto build), just set it when init the bbpack object:
const BBPack = require('bbpack');
const bbpack = new BBPack({
sourceMap: true, // sourceMap support, default false
uglify: true, // uglify support, default false
watch: true // auto build when file change, default false
});
...
Then using libsPack or pagesPack for your project
Default bbpack use the babelify and less-modulesify for browserify's transfroming. If you want to custom it or using other browserify's transforms or plugins, you need to set the transfroms params when init the bbpack object:
const BBPack = require('bbpack');
const babelify = require('babelify');
const lessModulesify = require('less-modulesify');
const bbpack = new BBPack({
transforms: [
{
plugin: lessModulesify, // If it is a browserify plugin the key will be 'plugin'
config: { // transform's config
sourceMap: true,
lessCompileOption: {}
}
},
{
transform: babelify, // If it is a browserify transform the key will be 'transform'
config: {
presets: ['es2015', 'react', 'stage-3']
}
}
]
...
});
For more detail you can see babelify, less-modulesify and browserify transforms List
This is a example of using the bbpack's afterPipes feature. And It's very useful for development.
Using BrowserSync need a web server. So I write a script for it(server.js).
First run node server to start the static web server.
Then change dirctionary to demo5 and run node build will start the building process and the browsersync service it will auto open the site you set in you default browser.
For more detail just see browsersync site
MIT