用 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