Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vue 淺談前端建置工具

1,782 views

Published on

vuedinner #3

Published in: Software

Vue 淺談前端建置工具

  1. 1. vuedinner #3 Vue
  2. 2. @wainfo github: andyyou 2
  3. 3. • • • webpack • vue-loader • vue-cli • vue templates (webpack) •
  4. 4. • HTML • CSS • Javascript • Assets(Images, Fonts) EB
  5. 5. • HTML - Templates • CSS - Sass, Less, PostCSS • Javascript - Compile To Javascript • • • • Lint • Debug Tools
  6. 6. • Bower, npm • Browserify, RequireJS • Grunt • gulp, fly • Brunch • webpack • jspm • rollup
  7. 7. http://j.mp/2bhpkQL
  8. 8. > ls -al | grep whoami pipe
  9. 9. gulp.src(paths.scripts) .pipe(sourcemaps.init()) .pipe(coffee()) .pipe(uglify()) .pipe(concat('all.min.js')) .pipe(sourcemaps.write()) .pipe(gulp.dest('build/js'));
  10. 10. ES2015 Generator style
  11. 11. Javascript
  12. 12. require('module')
  13. 13. > npm install -g browserify > browserify [src] -o > [dist]
  14. 14. webpack
  15. 15. • • • ES6 Module Loader Polypill • SystemJS Universal Dynamic Module Loader Any type of module format can be loaded and it will be detected automatically by SystemJS.
  16. 16. jspm?
  17. 17. http://j.mp/2aNmimZ
  18. 18. webpack
  19. 19. • npm + • grunt, gulp • requires, browserify • webpack + ( ) • jspm + + + ( ) • rollup, fly,
  20. 20. webpack • • / (2014) • • • HRM • loaders & plugins • Code Splitting (sync, async chunk) • •
  21. 21. webpack • • / • • • HRM • loaders & plugins • Code Splitting (sync, async chunk) • •
  22. 22. webpack
  23. 23. ...
  24. 24. • • • • • • • webpack
  25. 25. 1. 1. 2. 2. 3. 4.
  26. 26. vue with webpack http://j.mp/2bzJl36
  27. 27. # npm/nvm > mkdir vuedinner && cd vuedinner > npm init -y > npm i webpack -D https://github.com/andyyou/vue-dinner-demo
  28. 28. > webpack <entry> <output> > webpack e1.js e2.js bundle.js > webpack andyyou=./entry.js "[name].js" >> output a andyyou.js file. // webpack.config.js module.exports = { output: { filename: "[name].bundle.js" } }
  29. 29. 1. index.html 2. main.js index.js 3. 4. webpack
  30. 30. loaders Javascript
  31. 31. > npm i css-loader style-loader file-loader -D !
  32. 32. > webpack main.js bundle.js —output-public-path=‘/dist/' --module-bind 'css=style!css' --module-bind 'png=file'
  33. 33. webpack-dev-server + plugins
  34. 34. > npm i webpack-dev-server -D
  35. 35. • dll • css ( ) • , , , • HTML5 Cache mainfest • Offline (ServiceWorker) • HRM • s3 • plugins
  36. 36. ES2015 + Vue
  37. 37. 1. 2. webpack.config.js 3. .babelrc 4. ( Vue.js) https://github.com/babel/babel-loader
  38. 38. # webpack: webapck # webpack-dev-server: # webpack-merge: (webpack.config.js) # css-loader: css # style-loader: css html # file-loader: # url-loader: base64 # babel-core: ES2015 babel # babel-loader: ES2015 # babel-plugin-transform-runtime: polyfilling ( babel-runtime) # babel-preset-es2015: es2015 # babel-preset-stage-0: # babel-runtime: ES2015+ helpers, polyfilling `class MyClass {}` -> `_classCallCheck` AST # vue-loader: vue # vue-html-loader: vue template # vue-style-loader: vue # vue-hot-reload-api: Hot reload API for Vue components
  39. 39. vue-loader vue-loader
  40. 40. • <template> • HTML • vue <template> • • <script> • javascript ES2015 Babel • vue <script> • JS CommonJS require • import ES2015 • script Vue - Vue.extend() • <style> • css • <style> • `sytle-loader` <head> <style> • webpack css
  41. 41. src CommonJS require • ./ • module/dist/all.css npm <template src="./template.html"></template> <style src="./style.css"></style> <script src="./script.js"></script>
  42. 42. vue-style!css![options]!rewriter(postcss) Source Code • autpprefixer • scoped • postcss + cssnext
  43. 43. vue-hot-reload-api 2.0.6 Hot Reload
  44. 44. vue-loader loader webpack loader jade-loader function HTML String jade jade-loader
  45. 45. • file-loader • url-loader base64 HTTP request url(image.png) > require(‘file!./image.png')
  46. 46. > npm i vue-loader vue-html-loader vue-style-loader vue-hot-reload- api@1 -D # 1. webpack.config.js # 2. main.js app.vue
  47. 47. > webpack-dev-server --inline --hot Hot Module Replacement / Hot Reload
  48. 48. webpack-dev-server • Iframe mode http://localhost:8080/webpack-dev-server/index.html • Inline mode webpack-dev-server client entry bundle
  49. 49. --hot —hot = HotModuleReplacementPlugin
  50. 50. https://github.com/webpack/webpack-dev-server/blob/ 2eef9e64e4528dfda756d61c627d4b5a49bbae8e/bin/ webpack-dev-server.js#L240-L257
  51. 51. https://medium.com/@rajaraodv/webpack- the-confusing-parts-58712f8fcad9#. 6z7z6wx8q
  52. 52. JS
  53. 53. +
  54. 54. vue-loader vue-cli > npm install -g vue-cli > vue init <template-name> <project-name> > vue init webpack v-project
  55. 55. webpack
  56. 56. webpack dev middleware plugins • webpack dev middleware • webpack hot middleware • html-webpack-plugin • html-webpack-template • extract-text-webpack-plugin
  57. 57. Vue - PASSER

×