Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Vue 淺談前端建置工具

1 768 vues

Publié le

vuedinner #3

Publié dans : Logiciels
  • Soyez le premier à commenter

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

×