cooking搭建简易Vue开发环境（入门）

首先附上cooking的官方文档地址：http://elemefe.github.io/cooking/

就像cooking官方介绍的一样，cooking是一款不仅简单而且高效的前端构建工具，适合于新手上路，不需要发杂的webpack就可以构建出优雅的开发环境。下面，我们就一起熟悉这款工具。

1.环境

相信看到这里的童鞋都是对vue有一定了解的，所以也都知道一些必备的基础知识，比如node，npm，webpack等。

cooking的官方文档上有明确说明，要在NPM 3+，Node 4+ ，Python 2.7+ 环境下运行。这是保障正常运行的基础。

2.安装cooking

2.1 创建空项目

创建文件夹

mkdir cooking_test

进入文件夹

cd cooking_test

初始化git仓库

git init

初始化项目，一路回车就好

npm init

这时，可以看到已经创建了一个名为cooking_test的文件夹，并且在文件夹内已经生成一个package.json文件。

2.2 安装cooking

首先要安装cooking的命令行

npm i cooking -D   // i 是 install 的简写，－D 是 --dev-save 的简写

安装完cooking就需要安装一些依赖，这些也就是搭建一个最基础的前端开发环境会用到的东西：babel 处理 ES2015；postcss、css-loader、style-loader 处理 CSS 文件；html-webpack-plugin 用来生成 HTML 模板等等。暂时不用关心这些，只需要安装这些依赖就好。

npm install babel-core
npm install babel-loader
npm install css-loader
npm install file-loader
npm install html-webpack-plugin
npm install html-loader
npm install webpack
npm install webpack-dev-server
npm install extract-text-webpack-plugin

2.3 简单的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的配置文件。

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

安装 preset-es2015

npm install babel-preset-es2015 -D

新建一个src/index.js的入口文件，并随便写一下ES2015的代码，当前的目录结构如下：

为了更方便的调用cooking命令行，我们在package.json里配置cooking的script。如下：

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

运行一下 cooking build。其中 -p 表示启动进度条。这一步可能会报错，原因可能是某些依赖没有安装或者安装的依赖版本过低，请根据提示安装相应的依赖。

npm run cooking build -- -p

如果出现以下的内容，则为成功。

然后就会得到一个dist目录，里面有一个压缩过的app.[hash].js文件，cooking极大的简便了webpack的写法，帮我们省去了许多我们不用关心的标准化的配置项，最终只需要简单的几行配置就可以完成同样的工作。如果要换成传统的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
    })
  ]
}

3.基本的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文件，同时需要安装cooking-vue2 。

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

// 调用 set 方法传入自定义配置
cooking.set({
  entry: './src/index.js',  // 指定入口文件
  dist: './dist',  // 设置打包后的文件目录
  hash: true,   // 打包的文件是否带 hash
  sourceMap: true,   // 是否带 sourceMap
  template: './index.html', // 加载 index.html 模板
  devServer: { // 开启 webpack-dev-server
    port: 9527, // 端口为 9527
    publicPath: '/' // 开启 dev-server 时默认打包的资源文件路径是和 index.html 同级的
  },
  extends: ['vue2'] // 加载 cooking-vue2，自动配置 Vue 2.0 相关内容
});

module.exports = cooking.resolve();

npm install cooking-vue2 -D  //安装cooking-vue2，不然可能会报错

为了运行方便，可以修改一下运行的命令，打开package.json，在scripts里修改代码。

  "scripts": {
    "dev": "cooking watch -p",  // 运行
    "dist": "cooking build -p",  // 打包
  },

至此，一个简单的Vue开发环境就搭建完成了，执行以下代码运行项目。

npm run dev

4.其他配置

在实际的项目开发中，我们经常会需要用到很多插件，下面就介绍一些cooking环境下功能配置。

CSS预处理

不管你是倾向于Sass或是Less，在cooking中的配置都是极其方便的。首先安装cooking-sass，然后再extends里配置即可。（以Sass为例）。

npm install cooking-sass -D

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

CSS后处理（postcss）

而如果是使用postcss,也很方便，只需要将配置项配置到postcss属性上即可，接受数组和函数类型。

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

其他配置

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'),
    require('autoprefixer'),  // 兼容浏览器的前缀
    require('rucksack-css')  //  https://www.rucksackcss.org/docs/#autoprefixing
  ],
  extractCSS: true, // 提取 CSS 文件
  chunk: [
    'vendor', // entry 里定义的入口文件，也就是会将 vue 单独打包
    'manifest' // 这个并没有在 entry 里声明的会将所有公用部分打包，也就是 webpack runtime
  ],
  publicPath: '/dist/', // 打包后的资源文件相对于 url 的路径
  extends: ['vue2', 'lint'] // 安装 cooking-lint 并配置 '.eslintrc' 文件
});

module.exports = cooking.resolve();

本文参考的文章：https://segmentfault.com/a/1190000006867999