Vue.js `vue build` DIST.14 2017-02-17 @kazupon

Who are you ?

Vue.js Core Team member https://github.com/kazupon

Introduction

JavaScript Fatigue in Front-end https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.v7jsb7mjj

The solution of Vue • vue-cli • Official templates npm install -g vue-cli vue-cli init webpack-simple-2.0 my-app cd my-app npm install npm run dev

So, Web App setup Happy!!


But, About for prototyping … • Tools management … • Bundler configuration … • Template customizing … “We'd like to fold that functionality into vue-cli as vue build with a sharper focus on prototyping experience.” https://github.com/vuejs/vue-cli/issues/173

Damn, We are still fatiguing !!

Today Speak:
 vue-cli New command
 `vue build` ✨

`vue build` • A zero-configuration development setup, install once and build everywhere. • Support from v2.8.0 • Webpack based implementation • built-in some loaders: file, url, css, postcss, babel … • ES2015 with babel • dev-server with express

`vue build` Implementor

Implementor • Vue.js core team member https://github.com/egoist

Refined webpack development experience https://github.com/egoist/vbuild

Love call ❤ https://github.com/egoist/vbuild/issues/9

vbuild ➡ `vue build` porting !!

`vue build` Features ⭐

Basic vue build index.js
 Compiled successfully in 1793ms > Open http://localhost:4000

Build for production vue build index.js --prod > Creating an optimized production build: Hash: 56152bbe124d3f8999bc Version: webpack 2.2.1 Time: 2890ms Asset Size Chunks Chunk Names client.6832bedc.js 52.5 kB 0 [emitted] client client.6832bedc.js.map 426 kB 0 [emitted] client index.html 260 bytes [emitted] SUCCESS Compiled successfully.

Build for distribution component vue build comp.js --prod --lib Comp > Creating an optimized production build: Hash: 578553dd919e3ba54abf Version: webpack 2.2.1 Time: 562ms Asset Size Chunks Chunk Names comp.js 922 bytes 0 [emitted] client comp.js.map 8.37 kB 0 [emitted] client SUCCESS Compiled successfully.

Watch mode vue build index.js --watch
 Compiled successfully in 1793ms > Open http://localhost:4000 hello world !! hello vue.js !! Edit Update with Hot reloading !!

Single File Components vue build hello.vue
 Compiled successfully in 1793ms > Open http://localhost:4000

Configuration vue init webpack project1 cd project1 yarn vue build src/main.js --prod --webpack build/webpack.prod.conf.js > Using .babelrc in current working directory > Using webpack config file at ~/path/to/project1/build/webpack.prod.conf.js > Creating an optimized production build: Hash: 39c01c24ee5fd0c92ab6 Version: webpack 2.2.1 Time: 8086ms Asset Size Chunks Chunk Names static/js/client.f8a1e4f147fedafd6460.js.map 18 kB 0, 1, 3 [emitted] client static/logo.94d14d6a.png 9.17 kB [emitted] static/js/app.7cf57349194a8d0aefc2.js 2.6 kB 1, 3 [emitted] app static/js/vendor.4c0310dd0f2fc9218a18.js 76.4 kB 2, 3 [emitted] vendor static/js/manifest.da0f37b4fda13d9d3845.js 1.52 kB 3 [emitted] manifest static/css/client.e7a9982cfb5f83ec00c5653d0d57f219.css 434 bytes 0, 1, 3 [emitted] client static/css/app.e7a9982cfb5f83ec00c5653d0d57f219.css 431 bytes 1, 3 [emitted] app static/js/client.f8a1e4f147fedafd6460.js 2.64 kB 0, 1, 3 [emitted] client static/css/client.e7a9982cfb5f83ec00c5653d0d57f219.css.map 949 bytes 0, 1, 3 [emitted] client static/js/app.7cf57349194a8d0aefc2.js.map 17.8 kB 1, 3 [emitted] app static/css/app.e7a9982cfb5f83ec00c5653d0d57f219.css.map 956 bytes 1, 3 [emitted] app static/js/vendor.4c0310dd0f2fc9218a18.js.map 608 kB 2, 3 [emitted] vendor static/js/manifest.da0f37b4fda13d9d3845.js.map 14.2 kB 3 [emitted] manifest index.html 619 bytes [emitted] SUCCESS Compiled successfully.

DEMO

Conclusion

Conclusion • `vue build` is zero-configuration building command for prototyping • Use custom configuration feature, you can also build the your App!!

Reference • documentation
 https://github.com/vuejs/vue-cli/blob/master/docs/build.md

One more thing …

Vue.js community for Japanese • You can join via Vue.js official site
 http://jp.vuejs.org
 


Vue.je v-meetup=“#3” • 2017/03/16 19:00ʙ22:00 https://vuejs-meetup.connpass.com/event/48462/

Thanks!