vue 淺談前端建置工具
TRANSCRIPT
vuedinner #3
Vue
@wainfo github: andyyou
2
•
•
• webpack • vue-loader • vue-cli • vue templates (webpack) •
• HTML • CSS • Javascript • Assets(Images, Fonts)
EB
• HTML - Templates
• CSS - Sass, Less, PostCSS
• Javascript - Compile To Javascript
•
•
•
• Lint
• Debug Tools
• Bower, npm • Browserify, RequireJS • Grunt • gulp, fly • Brunch • webpack • jspm • rollup
http://j.mp/2bhpkQL
> ls -al | grep whoami
pipe
gulp.src(paths.scripts) .pipe(sourcemaps.init()) .pipe(coffee()) .pipe(uglify()) .pipe(concat('all.min.js')) .pipe(sourcemaps.write()) .pipe(gulp.dest('build/js'));
ES2015 Generator style
Javascript
require('module')
> npm install -g browserify > browserify [src] -o > [dist]
webpack
• •
• 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.
jspm?
http://j.mp/2aNmimZ
webpack
• npm +
• grunt, gulp
• requires, browserify
• webpack + ( )
• jspm + + + ( )
• rollup, fly,
webpack •
• / (2014)
•
•
• HRM • loaders & plugins • Code Splitting (sync, async chunk) •
•
webpack •
• /
•
•
• HRM • loaders & plugins • Code Splitting (sync, async chunk) •
•
webpack
...
• •
• •
• •
•
webpack
1. 1. 2.
2. 3. 4.
# npm/nvm> mkdir vuedinner && cd vuedinner> npm init -y> npm i webpack -D
https://github.com/andyyou/vue-dinner-demo
> webpack <entry> <output>> webpack e1.js e2.js bundle.js> webpack andyyou=./entry.js "[name].js">> output a andyyou.js file.
// webpack.config.jsmodule.exports = { output: { filename: "[name].bundle.js" }}
1. index.html
2. main.js index.js
3.
4. webpack
loaders
Javascript
> npm i css-loader style-loader file-loader -D
!
> webpack main.js bundle.js —output-public-path=‘/dist/' --module-bind 'css=style!css' --module-bind 'png=file'
webpack-dev-server + plugins
> npm i webpack-dev-server -D
• dll • css ( ) • , , , • HTML5 Cache mainfest • Offline (ServiceWorker) • HRM • s3 •
plugins
ES2015 + Vue
1.
2. webpack.config.js
3. .babelrc
4. ( Vue.js)
https://github.com/babel/babel-loader
# 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
vue-loader
vue-loader
• <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
src CommonJS require • ./ • module/dist/all.css npm
<template src="./template.html"></template><style src="./style.css"></style><script src="./script.js"></script>
vue-style!css![options]!rewriter(postcss)
Source Code
• autpprefixer • scoped • postcss + cssnext
vue-hot-reload-api 2.0.6
Hot Reload
vue-loader loader webpack loader jade-loader
function HTML String jade jade-loader
• file-loader
• url-loader base64 HTTP request
url(image.png) > require(‘file!./image.png')
> 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
> webpack-dev-server --inline --hot
Hot Module Replacement / Hot Reload
webpack-dev-server
• Iframe mode
http://localhost:8080/webpack-dev-server/index.html • Inline mode
webpack-dev-server client entry bundle
--hot
—hot = HotModuleReplacementPlugin
https://github.com/webpack/webpack-dev-server/blob/2eef9e64e4528dfda756d61c627d4b5a49bbae8e/bin/webpack-dev-server.js#L240-L257
https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.6z7z6wx8q
JS
+
vue-loader
vue-cli
> npm install -g vue-cli> vue init <template-name> <project-name>> vue init webpack v-project
webpack
webpack dev middleware plugins
• webpack dev middleware • webpack hot middleware • html-webpack-plugin • html-webpack-template • extract-text-webpack-plugin
Vue - PASSER
