譯文地址
Vue.js build set-up from scratch with webpack, vue-loader and hot reload
正文
Vue.JS 是我現(xiàn)在最喜歡的JavaScript視圖庫，在這篇文章中酌心，我將向你解釋如何使用Vue.JS策治、熱模塊修改囱淋、webpack以及整個vue生態(tài)系統(tǒng)建立一個項目，這樣你就能更好的理解你的應用是如何工作的了喧兄。
介紹
從2007年至今，我已經(jīng)使用JavaScript開發(fā)了很長時間，我喜歡angular只估，我喜歡react和ember，我能看到這些框架背后的動機和輝煌着绷，但真正讓我感到興奮的框架是VueJS蛔钙，他不是解決所有問題的完美方案，但我(以及很多人)看到了其中蘊含的價值荠医。
在JavaScript中有一個整體趨勢吁脱，尤其在react社區(qū)，讓庫專注于做好一件事子漩，并允許用戶將各種碎片以最好的方式粘在一起豫喧。這種方式很棒并且為大量的人服務，這對于初學者來說有一點壓迫性幢泼。我受到了這篇文章的啟發(fā)寫下了這個教程,有大量的react模板在這-有些是過時的紧显，有些有問題，而有些則無法工作缕棵，這些對于初學者而言都是痛苦的孵班。
在寫這篇文章的時候，Vue的開發(fā)者正在開發(fā)"官方入門套件"招驴，其中包含一個腳手架CLI來幫助構(gòu)建一個新工程篙程。這為開發(fā)帶來了一個簡單清晰而又可良好維護的出發(fā)點。
當然别厘，搭建一個你自己的開發(fā)環(huán)境仍有很多好處：
- 對比使用模板虱饿，你自己的工程依賴會更加順手。
- 如果有依賴不可用或你想要一些更新的東西稍浆，比如依賴一個預處理器或工具鏈撰茎，你可以直接將他引入而不會破壞構(gòu)建流程舔腾。
- 模板也許使用了某些你不需要的東西或庫叭莫。
也就是說猾漫，模板和腳手架谐岁，尤其是那些發(fā)布的作者會更加了解庫的價值澡屡，而你可以利用他們來學習并了解其原理梆暖，在你學習源碼之后你就可以選擇使用他們的模板颈畸。
請注意乌奇，在我寫作的同時我也在不斷學習一些新的東西，這篇文章我會經(jīng)常更新眯娱。
在開始之前
我最后修改這些說明是在2015年12月28日礁苗，我已經(jīng)在Ubuntu Linux上使用最新的穩(wěn)定版Node.js(5.3)測試過。
在命令行運行命令如下所列
$ ls <- Run this in root directory of our project
$ (public/) ls <- Run this in the 'public' directory
第一部分：建立基礎結(jié)構(gòu)
讓我們從一個空的文件夾開始建立一個名為"myapp"的工程徙缴，這將是未來所有說明的root文件夾
$ mkdir myapp
$ cd myapp/
在root文件夾建立一個package.json寂屏，至此我們還沒有依賴。
{
"name": "myapp",
"version": "0.0.1",
"description": "My app",
"dependencies": {
},
"devDependencies": {
},
"author": "You"
}
在root文件夾建立一個index.html娜搂，這將是提供給瀏覽器的實際html迁霎。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Example</title>
</head>
<body>
<h3>{{ message }}</h3>
<script src="dist/build.js"></script>
</body>
</html>
注意關于這個html文件的兩件事：
- 它使用了
dist/build.js，而這一個JS文件還沒有創(chuàng)建 - 他有一個
{{ message }}片段百宇，其數(shù)據(jù)將由vue在稍后填充
建立一個文件夾src并增加一個文件src/main.js：
import Vue from 'vue'
new Vue({
el: 'body',
data: {
message: "Hello Vue"
}
})
至此我們已經(jīng)有了基礎vuejs應用的骨架考廉，但他還需要構(gòu)建完成。
第二部分：基礎webpack構(gòu)建
在你的root文件夾下新建一個文件名為webpack.config.js携御，在其中填充代碼：
module.exports = {
// 這是包含其他模塊的主文件
entry: './src/main.js',
// 編譯好的文件應該放哪昌粤？
output: {
// 路徑在dist文件夾下
path: './dist',
// 文件名為`build.js`，因此完整的路徑為dist/build.js
filename: 'build.js'
},
module: {
// 特殊編譯規(guī)則
loaders: [
{
// 請求webpack檢查：如果文件以.js結(jié)尾啄刹，則應用轉(zhuǎn)換
test: /\.js$/,
// 使用babel進行轉(zhuǎn)換
loader: 'babel',
// 不轉(zhuǎn)換node_modules文件夾(不需要編譯)
exclude: /node_modules/
}
]
}
}
在你的root文件夾下新建一個文件.babelrc涮坐，Babel是用于轉(zhuǎn)換ES6到當前JavaScript版本的工具，它需要用presets配置誓军，Vue依賴es2015preset（支持下一代EcmaScript/JavaScript）和stage-0（我不知道這是干嘛的[譯者注：stage-0為ES7不同階段語法提案的轉(zhuǎn)碼規(guī)則袱讹，此為第一階段]）
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}
安裝webpack命令行工具：
$ npm install -g webpack
安裝本地庫需要構(gòu)建（如dev dependencies，開發(fā)依賴）昵时，我們可以將他增加到你的package.json的devDependencies部分捷雕。
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"webpack": "^1.12.2",
在你完成package.json的更新后，執(zhí)行：
$ npm install
注意：我建議使用官方Vue初始化套件以得到最好的支持版本壹甥，因為有時最新版本的依賴庫并不會得到最好的支持救巷。
最后，為你的主程序安裝vuejs庫句柠，你需要將其放在dependencies中浦译。
$ npm install --save vue
現(xiàn)在你可以使用WebPack構(gòu)建你的應用棒假，在你的root目錄下執(zhí)行：
$ webpack
你應該可以看到如下輸出：
Hash: 6568e32467dc12c8aeeb
Version: webpack 1.12.9
Time: 743ms
Asset Size Chunks Chunk Names
build.js 246 kB 0 [emitted] main
+ 3 hidden modules
在你的瀏覽器中打開index.html，如果你看到"Hello Vue"精盅，那么至此一切OK淆衷，恭喜你，你有了一個基礎的VueJS工程渤弛。
第三部分：vue-loader和.vue文件
現(xiàn)在我們將要開始vuejs中很棒的一個部分：使用.vue文件創(chuàng)建組件。
如下更新你的index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Example</title>
</head>
<body>
<app></app>
<script src="dist/build.js"></script>
</body>
</html>
注意甚带，對比在body節(jié)點中建立一個簡單的視圖模型(ViewModel)她肯，我們安裝一個名為app的組件并架設在<app></app>中。
如下修改你的main.js：
import Vue from 'vue'
import App from './app.vue'
new Vue({
el: 'body',
components: { App }
})
現(xiàn)在鹰贵，注意我們從app.vue文件中提取了一個名為App的新組件晴氨，并將其包含到body元素的實例中。
我們將創(chuàng)建一個名為src/app.vue的文件碉输，將下列代碼加入app.vue中：
<template>
<div class="message">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello from vue-loader!'
}
}
}
</script>
<style>
.message {
color: blue;
}
</style>
在這個文件中：我們設置了一種樣式籽前，在script中定義了行為，并在template中定義了HTML模板敷钾。想要學習組件是如何工作的枝哄，你需要查看vuejs的文檔。
現(xiàn)在我們重新執(zhí)行webpack并且看看會發(fā)生什么：
Hash: c71cc00f645706203ac4
Version: webpack 1.12.9
Time: 749ms
Asset Size Chunks Chunk Names
build.js 246 kB 0 [emitted] main
[3] ./src/app.vue 0 bytes [built] [failed]
+ 3 hidden modules
ERROR in ./src/app.vue
Module parse failed: /home/anirudh/work/misc/vue-scaffold/example/src/app.vue Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <template>
| <div class="message">{{ msg }}</div>
| </template>
@ ./src/main.js 7:11-31
Webpack不知道如何處理.vue文件阻荒，幸運的是這很容易修改解決挠锥，打開你的webpack配置，更新如下代碼：
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
publicPath: 'dist/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue'
}
]
},
vue: {
loaders: {
js: 'babel'
}
}
}
現(xiàn)在侨赡，在你的package.json的devDependencies部分增加如下項：
"css-loader": "^0.23.0",
"style-loader": "^0.13.0",
"vue-loader": "^7.3.0",
"vue-html-loader": "^1.0.0",
執(zhí)行npm install來取得新的庫
$ npm install
最后蓖租，再次執(zhí)行webpack，你會看到如下輸出：
Hash: 740a1d3c85161f03a0cf
Version: webpack 1.12.9
Time: 1355ms
Asset Size Chunks Chunk Names
build.js 258 kB 0 [emitted] main
+ 11 hidden modules
如果你打開瀏覽器羊壹，你應該可以看到藍色的"Hello from vue-loader"蓖宦，這就意味著樣式、HTML和javascript都被正確編譯油猫。作為獎勵給你一張Darcy的照片稠茂。
第四部分：熱模塊替換/熱重載
熱模塊替換或熱重載是JavaScript世界中最熱的新技術，這允許你節(jié)約JavaScript文件并實時更新組件情妖。
這是基礎邏輯：
- 你寫了一個應用主慰。
- 你在瀏覽器中加載這個應用，并開始使用這個應用鲫售。
- 這個應用有一個'state'共螺，Vue使用這個值來渲染頁面。
如果你要做出改變或修復一個小bug情竹，你需要重載這個頁面藐不，并重復所有步驟以使得應用回到初始state。
有了熱重載，工程流程變得不同：
- 打開應用雏蛮，將其帶入給定的state
- 更新源碼并保存
- Webpack檢查修改涎嚼，他會只重新編譯改變的模塊
- Webpack發(fā)送代碼并使用如瀏覽器上的websockets改變在線應用
- Vue使用新的模塊并熱重載你的代碼，重新展示你的頁面的同時保持state完整
第一步挑秉，我們需要使用WebPack的開發(fā)服務但不是在瀏覽器中以一個html文件打開它法梯。首先，更新package.json中的devDependencies：
"vue-hot-reload-api": "^1.2.0",
如下執(zhí)行：
$ npm install
$ npm install -g webpack-dev-server
$ webpack-dev-server --inline --hot
當你運行webpack-dev-server犀概，你會看到一堆輸出：
http://localhost:8080/
webpack result is served from /dist/
content is served from /home/anirudh/work/misc/vue-scaffold/example
Hash: ef5ed1df9062de968cb6
Version: webpack 1.12.9
Time: 1773ms
Asset Size Chunks Chunk Names
build.js 511 kB 0 [emitted] main
chunk {0} build.js (main) 465 kB [rendered]
[0] multi main 52 bytes {0} [built]
[2] (webpack)-dev-server/client?http://localhost:8080 2.48 kB {0} [built]
[3] (webpack)/~/url/url.js 22.3 kB {0} [built]
[... omitted for brevity ...]
[85] ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/app.vue 58 bytes {0} [built]
[86] ./~/vue-hot-reload-api/index.js 5.62 kB {0} [built]
webpack: bundle is now VALID.
在瀏覽器中打開http://localhost:8080立哑，你會看到同樣的輸出，但這還沒有顯示出Vue的HMR有多棒姻灶。改變你的src/app.vue:
<template>
<div class="message">Value is: {{ count }}</div>
<a href="#" @click="increment">Increment</a>
</template>
<script>
export default {
data () {
return {
count: 0
}
},
methods: {
increment () {
this.count ++;
}
}
}
</script>
<style>
</style>
重載http://localhost:8080铛绰，你會看到一個計數(shù)器，同時有一個按鈕产喉，點擊這個按鈕捂掰，計數(shù)器就會增加。
現(xiàn)在曾沈，更新代碼这嚣，你可以改變樣式、改變按鈕名稱甚至是increment功能改造塞俱，如果你保存了代碼疤苹，組件便會更新。
后續(xù)內(nèi)容
你的工程可能并不需要所有這些東西敛腌，但這是你應該知道的vue相關內(nèi)容卧土。在你開始構(gòu)建應用前，有一些事情是需要你花點時間搜索和創(chuàng)建的：
區(qū)分開發(fā)/產(chǎn)品構(gòu)建
對于產(chǎn)品像樊，你需要一個分離的壓縮版的構(gòu)建尤莺，你可以看看vuejs的建議vue-loader-example webpack config
注意，將你的webpack.config移動到一個分離的文件夾需要你更多的配置生棍。
測試
測試在本教程范圍之外颤霎，并且你的測試策略依賴于你的應用本身，可以看 vue-loader-example test example是如何測試的涂滴。
使用圖像友酱，靜態(tài)文件和CSS工作
如果你的應用需要傳統(tǒng)的CSS文件和圖像，webpack可以幫助你柔纵，使用file-loader缔杉，url-loader等適當?shù)募虞d器并提高開發(fā)流程。
注意
你可以通過eslint-loader配置eslint搁料，vue-loader-example是一個很好的例子或详，同時一個好的eslintrc可以很好的保障eslint的工作系羞。
