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

01-24

本文適合 Vue 的初學者，以及對 webpack 不熟悉的同學閱讀。前提是你要會用基本的命令行、 Node 和 NPM，以及掌握 ES2015 的基礎知識。本文都是在 macOS 環境下運行，要求使用下面環境。我們會以 Vue 2.0 搭配 Webpack 2.0 作為教程。

npm >= 3, node >= 4

寫過 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，並且安裝 preset-es2015。

npminstall babel-preset-es2015 -D

{ "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 -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 里也是很簡單就可做到，我們來大致補充一下，完成最終配置文件。

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

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

結尾

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

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

---------

GitHub - cooking-demo/simple
GitHub - ElemeFE/cooking: 更易上手的前端構建工具
cooking 開發文檔
GitHub - cnpm/npminstall: Make `npm install` fast and easy.