$30 off During Our Annual Pro Sale. View Details »

vue build

kazupon
February 17, 2017

vue build

kazupon

February 17, 2017
Tweet

More Decks by kazupon

Other Decks in Programming

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!