Preset build tool for Vue.js apps.
- Web apps made with Vue.js
- Desktop apps made with Electron and Vue.js
- Vue related stuffs, like Vue components, directives, etc.
- Extendable to build any web app.
Dive into the WIKI or API to see more. 😋
Or see the alive example made with vbuild: https://github.com/vist-service/vist
Install via NPM, work with Node >= 4 and NPM >=3:
# it takes me 7 minutes to complete the installation
$ npm install -g vbuildInstall via GIT:
Recommended way for power users to install vbuild, since you can edit the core code directly to suit your needs!
$ git clone https://github.com/egoist/vbuild.git
$ cd vbuild
$ npm install
$ npm linkYou can use full-featured ES2015+ and PostCSS with CSSNext in your Vue apps.
# build ./src/index.js
# production ready
$ vbuild
# yeppppp! so simple!
# build something elsewhere
# -e/--entry
$ vbuild --entry ./lib/foo.js
# development? sure! with hot reloading!
# -d/--dev
$ vbuild --dev
# your app deserves a name, ie. <title> in html
# -t/--title
$ vbuild --title FaceBookScaffolding tools like Yeoman and Vue-cli save us a lot of time, while vbuild does not add additional files into your projects but those do. You can skip the step of generating boilerplates and start writing code of your app immediately.
Imagine using scaffolding tool for prototyping every small demos of you? Dear lord! I refuse to do that. You can use vbuild for your experiments or demos with nearly no setup.
vbuild can build production ready apps by default. 😅
If you are stilling using Vue in a non-SPA website, you can use --watch mode when developing. Unlike --dev mode this way only rebuilds assets when files change, no dev server was established.
# for example you are using Vue with Laravel
# and using assets-webpack-plugin to get the paths of bundled files in Laravel
$ vbuild --watch --output-assets-pathReally? sure, I will add this feature once Vue supports Virtual Dom or Server-side rendering. And it will come soon!
Drop a vbuild.js in the root of your project directory:
export default {
// the options here (except `webpack()` function) can be override by cli arguments
entry: {
js: './src/app.js',
css: './src/app.css'
},
browsers: ['ie > 10', 'last 1 version'],
production: {
devtool: false
},
webpack(config, options) {
// config: webpack config
// options: cli arguments merged with options above
// update config before building
// this can override changes made by cli arguments and options above
config.entry = './goaway.js'
}
}For more usages:
$ vbuild --help
Preset build tool for Vue.js apps.
Usage:
vbuild [options]
Example:
vbuild --entry index.js --port 4000 --dev --browser-sync
Options:
-e/--entry: Specific entries
-d/--dev: Development mode
-w/--watch: Watch mode
-p/--port [port]: Server port, port is optional
-t/--title [title]: App title, title is optional
-b/--browsers: Set autoprefixer browser list
--lint: Lint your code
--umd <moduleName>: UMD mode and prvide a module name
--live: Live reloading when files change
--cjs: CommonJS mode
--electron: Electron mode
--silent: Do not open browser
--browser-sync [port]: Browser Sync, port is optional
--disable-html: Do not generate html file
--output-assets-path [filename]: Output assets path using assets-webpack-plugin
--template: Html-webpack-plugin template
-c/--config [path]: Specific a config file path
--no-config: Do not use config file
-v/--version: Print version
-h/--help: Print help (You are here!)import vbuild from 'vbuild'
(async function () {
await vbuild(options)
})()Type: string array object
Default: ./src/index.js
Webpack config entry.
Type: boolean
Default: false
Run in development mode, ie. hot reloading and a lot more.
Type: boolean
Default: false
Run in watch mode, works like webpack --watch
Type: number
Default: 4000
Dev server port.
Type: string
Default: vbuild
HTML title.
Type: string
Default: dist
Dist directory.
Type: array
Default: ['> 5%', 'last 2 version', 'ie > 8']
Autoprefixer browser list.
Type: string
Build in UMD format, and specific a moduleName.
Type: boolean
Default: false
Build in CommonJS format.
Type: boolean
Default: false
Use Electron mode to build, support hot reloading.
Type: boolean
Default: false
Don't open browser when bundle valid in dev mode.
Type: boolean number
Default: false 23789
Use browser-sync-webpack-plugin and specific a port to run at.
Type: boolean
Default: false
Live reloading when files change.
Type: boolean
Default: false
Lint your code. (ESlint for now)
Type: object
Default: {}
ESlint-compatiable config.
Type: array function
An array of PostCSS plugins or a function that return an array of plugins.
Type: boolean
Default: false
Prevent from generating html files, it's set to true in --umd and --cjs mode. But you can override it.
Type: boolean string
Default: false vbuild-assets.json
Use assets-webpack-plugin to output assets path in ./vbuild-assets.json, if it's a string we use it as filename.
Type: string
Html-webpack-plugin template.
Type: object
Default: undefined
Development options, will be deeply assigned into options in --dev mode.
Type: object
Default: undefined
Production options, will be deeply assigned into options in build mode.
Type: function
Default: undefined
Params: config options
Specfic a function to update webpack config before building. options is the API options.
Type: string
Default: ./vbuild.js
Specific a custom config file path. Set to false to disable config file.
MIT © EGOIST