脚手架介绍
前言
这个项目主要涉及两部分知识，一是使用node.js开发命令行工具的基础入门，二是前端工程化的基础入门。前者主要介绍如何使用node.js开发简单的命令行工具，实现简单的脚本开发、命令行交互与一些简单的shell命令。后者则主要演示如何从零开始搭建一个简单可用易拓展的前端项目。
主要工具的介绍
command.js node.js的命令行工具包
inquirer 命令行交互实现的工具包
webpack 目前最流行的前端项目打包工具
脚手架核心功能展示及实现目标
一个前端脚手架需要做到什么？这点我们以vue-cli为例，展示一下脚手架简单的交互与核心的功能。
在全局安装vue-cli以后，我们看看vue-cli是怎么创建一个项目的。
首先是通过终端输入命令
vue create hello-world
这是我们这个脚手架需要实现的第一步，创建一个命令，在终端输入该命令后，可以替我们去做某些事情————当然也是通过代码去做。 但光是执行命令还不够。vue-cli还会进行相应的交互
我们需要在输入命令以后进入交互阶段，让用户在终端输入相应内容，并根据内容做出不同的判断执行不同的代码。
做完这些事情以后，脚手架会为我们新建一个文件夹，并在文件夹中生成一个简单的应用模板。简单地说就是从其他地方下载一个应用模板。
这一块有很多的实现方法，但最简单最直接也是最免费的方法，是利用shell执行git clone 下载相应的仓库。那么我们就要准备一个可用的应用模板，并会执行一些简单的文件操作。
以上这些就是成型脚手架的简单功能。
node脚本与命令行工具入门
npm调用script脚本
通过npm包的协助，node可以非常简单方便的进入脚本开发。
首先我们创建一个文件夹，并初始化一个npm包。
mkdir demo
cd demo
npm init
初始化以后我们可以看到package.json文件。 我们先把name,version,description填上。
{
"name": "demo", // 你想发布的包的命名
"version": "0.0.1", // 每次发布都要更新版本，建议从低版本开始
"description": "脚手架学习",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
这时我们可以看到script字段，上面配置了命令test。script配置相应的命令后，使用npm ${test}可以在终端执行该字段的命令。 我们为scripts配置start字段
{
"name": "demo", // 你想发布的包的命名
"version": "0.0.1", // 每次发布都要更新版本，建议从低版本开始
"description": "脚手架学习",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start" : "node index.js"
},
"author": "",
"license": "ISC"
}
这时候在终端执行npm start,相当于执行node index.js。 我们新建一个index.js文件
touch index.js
代码
console.log("hello world")
然后我们敲上
npm start
不出意外的话是会打印出 "hello world"的。
