用 cooking 搭建一個簡單又優雅的 Vue 項目開發環境 (入門篇)

本文適合 Vue 的初學者，以及對 webpack 不熟悉的同窗閱讀。前提是你要會用基本的命令行、 Node 和 NPM，以及掌握 ES2015 的基礎知識。本文都是在 macOS 環境下運行，要求使用 npm >= 3, node >= 4 的環境。咱們會以 Vue 2.0 搭配 Webpack 2.0 做爲教程。

寫過 Vue 項目的同窗或多或少都用過 vue-cli 來搭建 Vue + webpack 的項目。對於初學者來講，第一次生成這個項目後有所顧忌 —— 生成那麼多 webpack 的配置文件到底 TM 是幹嗎用的？

純 webpack 搭建 Vue 項目確實須要許多配置去處理 vue 文件、CSS 預處理、靜態資源、以及壓縮、熱替換等等內容。一開始接受不了這麼多也很正常。其實不少時候這些 webpack 配置均可以標準化甚至封裝起來，簡化其配置。cooking 就是爲咱們作了這件事，有了它咱們就能夠很輕易搭建一個 Vue 項目的開發環境。下面我將一步步的教你從零開始搭建 Vue 項目。

建立一個空項目

沒什麼好說的，建立一個目錄而後進入，而後初始化 git 和 npm，填一下相關信息。

mkdir my-vue && cd my-vue && git init && npm init

安裝 cooking

若是不用 vue-cli 可能咱們並不清楚搭建 Vue 環境須要哪些依賴。不要緊，先安裝 cooking 再說。

npm i cooking -D # i 是 install 的簡寫，－D 是 --dev-save 的簡寫

若是訪問 NPM 較慢的話，安利下 python 發燒友寫的 npminstall，簡單用法以下，下面我將都是用 npminstall 替代 npm i。

npm i npminstall -g --registry=https://registry.npm.taobao.org
# 而後就能夠用它來安裝依賴了
npminstall cooking -D

安裝完 cooking 後會有提醒你安裝一串依賴列表，這些也就是搭建一個最基礎的前端開發環境會用到的東西：babel 處理 ES2015；postcss、css-loader、style-loader 處理 CSS 文件；html-webpack-plugin 用來生成 HTML 模板等等。固然這裏暫時不用關心這些。咱們只須要安裝這些依賴便可。

├── UNMET PEER DEPENDENCY babel-core@^6.0.0
├── UNMET PEER DEPENDENCY babel-loader@^6.0.0
├── UNMET PEER DEPENDENCY css-loader@^0.24.0
├── UNMET PEER DEPENDENCY extract-text-webpack-plugin@^1.0.0 || ^2.0.0-beta
├── UNMET PEER DEPENDENCY file-loader@^0.9.0
├── UNMET PEER DEPENDENCY html-loader@^0.4.3
├── UNMET PEER DEPENDENCY html-webpack-plugin@^2.9.0
├── UNMET PEER DEPENDENCY json-loader@^0.5.4
├── UNMET PEER DEPENDENCY postcss@^5.1.0
├── UNMET PEER DEPENDENCY postcss-loader@^0.11.1
├── UNMET PEER DEPENDENCY style-loader@^0.13.1
├── UNMET PEER DEPENDENCY url-loader@^0.5.7
├── UNMET PEER DEPENDENCY webpack@^1.12.0 || ^2.1.0-beta
└── UNMET PEER DEPENDENCY webpack-dev-server@^1.14.0 || ^2.1.0-beta

這時候咱們要作選擇，是打算用 webpack 1 仍是 2 搭建環境，二者 API 都些許變化、可是在 cooking 內部有作一些兼容處理，也就是說其實用 1 仍是 2 咱們要寫的配置是同樣的。

若是選擇安裝 webpack 1 那麼就安裝這些依賴：

npminstall babel-core babel-loader css-loader file-loader postcss postcss-loader\
 html-loader html-webpack-plugin json-loader style-loader url-loader\
 webpack@1 webpack-dev-server@1 extract-text-webpack-plugin@1 -D

若是是選擇 webpack 2，因爲目前 webpack 2 仍是 beta 版，所以能夠這樣安裝：

npminstall babel-core babel-loader css-loader file-loader postcss postcss-loader\
 html-loader html-webpack-plugin json-loader style-loader url-loader\
 webpack@beta webpack-dev-server@beta extract-text-webpack-plugin@beta -D

開始寫最簡單的配置

基礎的依賴安裝完了，下面咱們嘗試下寫一個最簡單的配置，感覺下 cooking 的用法。首先建立一個配置文件，命名叫作 cooking.conf.js，而後用你喜歡的編輯器打開。寫下以下內容。

// 引入 cooking 依賴
var cooking = require('cooking');

// 調用 set 方法傳入自定義配置
cooking.set({
  entry: './src/index.js', // 指定入口文件
  dist: './dist', // 設置打包後的文件目錄
  hash: true, // 打包的文件是否帶 hash
  sourceMap: true // 是否帶 sourceMap
});

// 生成 webpack 配置並導出
module.exports = cooking.resolve();

新建並配置一下 babel 的配置文件 —— .babelrc，而且執行 npminstall babel-preset-es2015 -D 安裝 preset-es2015。

{
  "presets": ["es2015"],
  "comments": false
}

而後建立一個 src/index.js 的入口文件，並隨便寫一些 ES2015 的代碼，因此目前的目錄結構爲：

my-vue\
  src\
    index.js
  cooking.conf.js
  .babelrc
  package.json

爲了方便調用 cooking 的命令行，咱們在 package.json 裏配置一條 cooking 的 script。

{
  "scripts": {
    "cooking": "cooking"
  }
}

運行一下 cooking build。其中 -p 表示啓動進度條。

npm run cooking build -- -p

最終，咱們會獲得一個 dist 目錄，裏面有一個壓縮過的 app.[hash].js 文件。那麼，若是換作傳統 webpack 配置要如何寫呢？

var webpack = require('webpack');

module.export = {
  devtool: '#source-map',
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: '[name].[hash:7].js'
  },
  module: {
    loaders: [
      {
        test: /\.(jsx?|babel|es6)$/,
        include: process.cwd(),
        exclude: /node_modules|bower_components/,
        loaders: ['babel-loader']
      }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {warnings: false},
      output: {comments: false},
      sourceMap: true
    })
  ]
}

看到這裏咱們就明白了，cooking 能幫咱們省去許多咱們能夠不用關心的可標準化的配置項，最終只須要簡單的幾行配置就完成一樣的事情。

最基礎的 Vue 項目的配置

有了前面的介紹，下面咱們來寫一份簡單的 Vue 項目的配置。固然首先，你要安裝一下 vue。

npm i vue@next -S

接下來咱們在 src/index.js 文件裏寫下建立一個 Vue 實例的代碼。

import Vue from 'vue'
import App from './app'

new Vue({
  el: '#app',
  render: h => h(App)
})

而後建立 src/App.vue 文件。

<template>
  <div>
    <h1>Hello, {{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'cooking'
    }
  }
}
</script>

<style lang="css" scoped>
  h1 {
    color: red;
  }
</style>

接着在根目錄下建立一個 HTML 模板文件，命名爲 index.html。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

如今，咱們須要搭建一個支持熱替換、能處理 CSS 和 Vue 文件，而且能自動將打包的文件應用在 HTML 模板上的開發環境，來看看須要哪些配置。回到 cooking.conf.js 文件。

var cooking = require('cooking');

cooking.set({
  entry: './src/index.js',
  dist: './dist',
  hash: true,
  sourceMap: true,
  template: './index.html', // 加載 index.html 模板
  devServer: { // 開啓 webpack-dev-server
    port: 8888, // 端口爲 8888
    publicPath: '/' // 開啓 dev-server 時默認打包的資源文件路徑是和 index.html 同級的
  },
  extends: ['vue2'] // 加載 cooking-vue2，自動配置 Vue 2.0 相關內容
});

module.exports = cooking.resolve();

只多了三行配置，固然內部作了不少事情。其中 cooking-vue2 是須要你單獨安裝的，執行下 npminstall cooking-vue2 -D 便可。若是你不安裝會有錯誤提示。這時候咱們開啓動開發模式。

npm run cooking watch
# 打開 http://localhost:8888 訪問

至此，一個簡單的開發環境搭建完成。

增長 CSS 預處理

不管你傾向 Sass、Less 仍是 PostCSS，都能很方便的配置。前二者直接在 extends 配置後安裝對應的插件便可，例如配置 Sass，以後執行 npminstall cooking-sass -D

{
  extends: ['vue2', 'sass']
}

若是是用 PostCSS，只需將配置項配置到 postcss 屬性上便可，接受數組和函數類型

{
  postcss: [
    require('postcss-salad')
  ]
}

最後按照我的喜愛更改配置

若是想提取 CSS 成單獨的文件，或者要將公用文件提取出來（CommonChunk），亦或者想加入 eslint，在 cooking 裏也是很簡單就可作到，咱們來大體補充一下，完成最終配置文件。

var cooking = require('cooking');

cooking.set({
  entry: {
    app: './src/index.js',
    vendor: ['vue']
  },
  dist: './dist',
  clear: true, // 每次打包都清理掉 dist 目錄
  hash: true,
  sourceMap: true,
  template: './index.html',
  devServer: { port: 8888, publicPath: '/' },
  postcss: [
    require('postcss-salad')
  ],
  extractCSS: true, // 提取 CSS 文件
  chunk: [
    'vendor', // entry 裏定義的入口文件，也就是會將 vue 單獨打包
    'manifest' // 這個並無在 entry 裏聲明的會將全部公用部分打包，也就是 webpack runtime
  ],
  publicPath: '/dist/', // 打包後的資源文件相對於 url 的路徑
  extends: ['vue2', 'lint'] // 安裝 cooking-lint 並配置 '.eslintrc' 文件
});

module.exports = cooking.resolve();

最後改一下 package.json 裏的 scripts，方便調用。

"scripts": {
  "dev": "cooking watch",
  "dist": "cooking build -p"
}

結尾

至此，一個簡單優雅的 Vue 項目開發環境就搭建完成了。不過，其實還不夠好，爲何咱們要手動建立項目？爲何要去手動安裝這麼多依賴？爲何每一個項目都要安裝一對一樣的依賴？那麼咱們將會在下一篇文章教你用 cooking-cli 來進一步提高開發體驗，今天就這。

這個項目的源碼我會放到 Github 上。

• cooking-demo/simple

• cooking

• cooking 文檔

• npminstall