Vue.js + webpack 項目實踐

jopen 9年前發布 | 354K 次閱讀 Vue.js JavaScript開發工具包


最近在內部項目中做了一些基于 vue + webpack 的嘗試，在小范圍和同事們探討之后，還是蠻多同學認可和喜歡的，所以通過 blog 分享給更多人。

首先，我會先簡單介紹一下 vue 和 webpack：

(當然如果你已經比較熟悉它們的話前兩個部分可以直接跳過)

介紹 vue

Vue.js + webpack 項目實踐

Vue.js 是一款極簡的 mvvm 框架，如果讓我用一個詞來形容它，就是 “輕·巧” 。如果用一句話來描述它，它能夠集眾多優秀逐流的前端框架之大成，但同時保持簡單易用。廢話不多說，來看幾個例子： 

<script src="vue.js"></script>

<div id="demo">
  {{message}}
  <input v-model="message">
</div>

<script>
  var vm = new Vue({
    el: '#demo',
    data: {
      message: 'Hello Vue.js!'
    }
  })
</script>

首先，代碼分兩部分，一部分是 html，同時也是視圖模板，里面包含一個值為message的文本何一個相同值的輸入框；另一部分是 script，它創建了一個 vm 對象，其中綁定的 dom 結點是#demo，綁定的數據是{message: 'Hello Vue.js'}，最終頁面的顯示效果就是一段Hello Vue.js文本加一個含相同文字的輸入框，更關鍵的是，由于數據是雙向綁定的，所以我們修改文本框內文本的同時，第一段文本和被綁定的數據的message字段的值都會同步更新——而這底層的復雜邏輯，Vue.js 已經全部幫你做好了。

Vue.js + webpack 項目實踐

再多介紹一點

我們還可以加入更多的 directive，比如： 

<script src="vue.js"></script>

<div id="demo2">
  <img title="{{name}}" alt="{{name}}" v-attr="src: url">
  <input v-model="name">
  <input v-model="url">
</div>

<script>
  var vm = new Vue({
    el: '#demo',
    data: {
      name: 'taobao',
      url: 'https://www.taobao.com/favicon.ico'
    }
  })
</script>

這里的視圖模板加入了一個<img>標簽，同時我們看到了 2 個特性的值都寫作了{{name}}。這樣的話，圖片的title和alt特性值就都會被綁定為字符串'taobao'。

如果想綁定的特性是像img[src]這樣的不能在 html 中隨意初始化的 (可能默認會產生預期外的網絡請求)，沒關系，有v-attr="src: url"這樣的寫法，把被綁定的數據里的url同步過來。

沒有介紹到的功能還有很多，推薦大家來我(發起并)翻譯的 Vue.js 中文文檔

web 組件化

最后要介紹 Vue.js 對于 web 組件化開發的思考和設計

如果我們要開發更大型的網頁或 web 應用，web 組件化的思維是非常重要的，這也是今天整個前端社區長久不衰的話題。

Vue.js 設計了一個*.vue格式的文件，令每一個組件的樣式、模板和腳本集合成了一整個文件， 每個文件就是一個組件，同時還包含了組件之間的依賴關系，麻雀雖小五臟俱全，整個組件從外觀到結構到特性再到依賴關系都一覽無余 ：

Vue.js + webpack 項目實踐

并且支持預編譯各種方言：

Vue.js + webpack 項目實踐

這樣再大的系統、在復雜的界面，也可以用這樣的方式庖丁解牛。當然這種組件的寫法是需要編譯工具才能最終在瀏覽器端工作的，下面會提到一個基于 webpack 的具體方案。

小結

從功能角度，template, directive, data-binding, components 各種實用功能都齊全，而 filter, computed var, var watcher, custom event 這樣的高級功能也都洋溢著作者的巧思；從開發體驗角度，這些設計幾乎是完全自然的，沒有刻意設計過或欠考慮的感覺，只有個別不得已的地方帶了自己框架專屬的v-前綴。從性能、體積角度評估，Vue.js 也非常有競爭力！

介紹 webpack

Vue.js + webpack 項目實踐

webpack 是另一個近期發現的好東西。它主要的用途是通過 CommonJS 的語法把所有瀏覽器端需要發布的靜態資源做相應的準備，比如資源的合并和打包。

舉個例子，現在有個腳本主文件app.js依賴了另一個腳本module.js 

// app.js
var module = require('./module.js')
... module.x ...

// module.js
exports.x = ...

則通過webpack app.js bundle.js命令，可以把app.js和module.js打包在一起并保存到bundle.js

同時 webpack 提供了強大的 loader 機制和 plugin 機制，loader 機制支持載入各種各樣的靜態資源，不只是 js 腳本、連 html, css, images 等各種資源都有相應的 loader 來做依賴管理和打包；而 plugin 則可以對整個 webpack 的流程進行一定的控制。

比如在安裝并配置了 css-loader 和 style-loader 之后，就可以通過require('./bootstrap.css')這樣的方式給網頁載入一份樣式表。非常方便。

webpack 背后的原理其實就是把所有的非 js 資源都轉換成 js (如把一個 css 文件轉換成“創建一個style標簽并把它插入document”的腳本、把圖片轉換成一個圖片地址的 js 變量或 base64 編碼等)，然后用 CommonJS 的機制管理起來。一開始對于這種技術形態我個人還是不太喜歡的，不過隨著不斷的實踐和體驗，也逐漸習慣并認同了。

最后，對于之前提到的 Vue.js，作者也提供了一個叫做 vue-loader 的 npm 包 ，可以把*.vue文件轉換成 webpack 包，和整個打包過程融合起來。所以有了 Vue.js、webpack 和 vue-loader，我們自然就可以把它們組合在一起試試看！

項目實踐流程

回到正題。今天要分享的是，是基于上面兩個東西：Vue.js 和 webpack，以及把它們串聯起來的 vue-loader

Vue.js 的作者以及提供了一個基于它們三者的 項目示例 。而我們的例子會更貼近實際工作的場景，同時和團隊之前總結出來的項目特點和項目流程相吻合。

目錄結構設計

  • <components>組件目錄，一個組件一個.vue文件
    • a.vue
    • b.vue
  • <lib>如果實在有不能算組件，但也不來自外部 (tnpm) 的代碼，可以放在這里
    • foo.css
    • bar.js
  • <src>主應用/頁面相關文件
    • app.html主 html
    • app.vue主 vue
    • app.js通常做的事情只是var Vue = require('vue'); new Vue(require('./app.vue'))
  • <dist>(ignored)
  • <node_modules>(ignored)
  • gulpfile.js設計項目打包/監聽等任務
  • package.json記錄項目基本信息，包括模塊依賴關系
  • README.md項目基本介紹

打包

通過gulpfile.js我們可以設計整套基于 webpack 的打包/監聽/調試的任務

在 gulp-webpack 包的官方文檔里推薦的寫法是這樣的： 

var gulp = require('gulp');
var webpack = require('gulp-webpack');
var named = require('vinyl-named');
gulp.task('default', function() {
  return gulp.src(['src/app.js', 'test/test.js'])
    .pipe(named())
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
});

我們對這個文件稍加修改，首先加入 vue-loader 

tnpm install vue-loader --save

.pipe(webpack({
  module: {
    loaders: [
      { test: /\.vue$/, loader: 'vue'}
    ]
  }
}))

其次，把要打包的文件列表從gulp.src(...)中抽出來，方便將來維護，也有機會把這個信息共享到別的任務 

var appList = ['main', 'sub1', 'sub2']

gulp.task('default', function() {
  return gulp.src(mapFiles(appList, 'js'))
    ...
})

/**
 * @private
 */
function mapFiles(list, extname) {
  return list.map(function (app) {return 'src/' + app + '.' + extname})
}

現在運行gulp命令，相應的文件應該就打包好并生成在了dist目錄下。然后我們在src/*.html中加入對這些生成好的js文件的引入： 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Main</title>
</head>
<body>
  <div id="app"></div>
  <script src="../dist/main.js"></script>
</body>
</html>

用瀏覽器打開src/main.html這時頁面已經可以正常工作了

加入監聽

監聽更加簡單，只要在剛才webpack(opt)的參數中加入watch: true就可以了。 

.pipe(webpack({
  module: {
    loaders: [
      { test: /\.vue$/, loader: 'vue'}
    ]
  },
  watch: true
}))

當然最好把打包和監聽設計成兩個任務，分別起名為bundle和watch： 

gulp.task('bundle', function() {
  return gulp.src(mapFiles(appList, 'js'))
    .pipe(named())
    .pipe(webpack(getConfig()))
    .pipe(gulp.dest('dist/'))
})

gulp.task('watch', function() {
  return gulp.src(mapFiles(appList, 'js'))
    .pipe(named())
    .pipe(webpack(getConfig({watch: true})))
    .pipe(gulp.dest('dist/'))
})

/**
 * @private
 */
function getConfig(opt) {
  var config = {
    module: {
      loaders: [
        { test: /\.vue$/, loader: 'vue'}
      ]
    }
  }
  if (!opt) {
    return config
  }
  for (var i in opt) {
    config[i] = opt
  }
  return config
}

現在你可以不必每次修改文件之后都運行gulp bundle才能看到最新的效果，每次改動之后直接刷新瀏覽器即可。

調試

Vue.js + webpack 項目實踐

打包好的代碼已經不那么易讀了，直接在這樣的代碼上調試還是不那么方便的。這個時候，webpack + vue 有另外一個現成的東西：source map 支持。為 webpack 加入這個配置字段devtool: 'source-map'：

var config = { module: { loaders: [ { test: /.vue$/, loader: 'vue'} ] }, devtool: 'source-map' }

再次運行gulp bundle或gulp watch試試看，是不是開發者工具里 debug 的時候，可以追蹤斷點到源代碼了呢：）

Vue.js + webpack 項目實踐

完整的 javascript 代碼如下： 

var gulp = require('gulp')
var webpack = require('gulp-webpack')
var named = require('vinyl-named')


var appList = ['main']


gulp.task('default', ['bundle'], function() {
  console.log('done')
})

gulp.task('bundle', function() {
  return gulp.src(mapFiles(appList, 'js'))
    .pipe(named())
    .pipe(webpack(getConfig()))
    .pipe(gulp.dest('dist/'))
})

gulp.task('watch', function() {
  return gulp.src(mapFiles(appList, 'js'))
    .pipe(named())
    .pipe(webpack(getConfig({watch: true})))
    .pipe(gulp.dest('dist/'))
})


/**
 * @private
 */
function getConfig(opt) {
  var config = {
    module: {
      loaders: [
        { test: /\.vue$/, loader: 'vue'}
      ]
    },
    devtool: 'source-map'
  }
  if (!opt) {
    return config
  }
  for (var i in opt) {
    config[i] = opt
  }
  return config
}

/**
 * @private
 */
function mapFiles(list, extname) {
  return list.map(function (app) {return 'src/' + app + '.' + extname})
}

最后，杜拉拉不如紫羅蘭

做出一個 vue + webpack 的 generator，把這樣的項目體驗分享給更多的人。目前我基于團隊內部在使用的輕量級腳手架工具寫了一份名叫just-vue的 generator，目前這個 generator 還在小范圍試用當中，待比較成熟之后，再分享出來

總結

其實上面提到的just-vue腳手架已經遠不止文章中介紹的東西了， 我們在業務落地的“最后一公里”做了更多的沉淀和積累，比如自動圖片上傳與畫質處理、rem單位自動換算、服務端/客戶端/數據埋點接口的梳理與整合、自動化 htmlone 打包與 awp 發布等等。它們為支持業務的開發者提供了更簡單高效的工作體驗。 篇幅有限，更多內容我也希望將來有機會再多分享出來。

最后再次希望大家如果有興趣的話可以來玩一下，無線前端組內的同學我都愿意提供一對一入門指導：）

Just Vue！

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！