首先附上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();