vue build

Transcript

1. Vue.js `vue build` DIST.14 2017-02-17 @kazupon
2. Who are you ?
3. Vue.js Core Team member https://github.com/kazupon
4. Introduction
5. JavaScript Fatigue in Front-end https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.v7jsb7mjj
6. 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
7. So, Web App setup Happy!!

8. 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
9. Damn, We are still fatiguing !!
10. Today Speak:
 vue-cli New command
 `vue build` ✨
11. `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
12. `vue build` Implementor
13. Implementor • Vue.js core team member https://github.com/egoist
14. Refined webpack development experience https://github.com/egoist/vbuild
15. Love call ❤ https://github.com/egoist/vbuild/issues/9
16. vbuild ➡ `vue build` porting !!
17. `vue build` Features ⭐
18. Basic vue build index.js
 Compiled successfully in 1793ms > Open http://localhost:4000
19. 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.
20. 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.
21. 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 !!
22. Single File Components vue build hello.vue
 Compiled successfully in 1793ms > Open http://localhost:4000
23. 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.
24. DEMO
25. Conclusion
26. Conclusion • `vue build` is zero-configuration building command for prototyping • Use custom configuration feature, you can also build the your App!!
27. Reference • documentation
 https://github.com/vuejs/vue-cli/blob/master/docs/build.md
28. One more thing …
29. Vue.js community for Japanese • You can join via Vue.js official site
 http://jp.vuejs.org
 

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