脚手架工具

目前，社区比较知名的脚手架，有vue-cli、create-react-app等。

他们都解决了一类问题，一站式的项目环境配置问题。

不过还有一些问题，它们没法解决，比如：

1、vue-cli专注的vue项目的环境搭建和配置问题、那每个公司的业务类型不一样，有些公司是金融业务，有些公司是物流业务，如何把相关的东西集成进来？

2、每一个公司在项目的沉淀中都是不一样的，比如组件的沉淀、监控埋点方案的沉淀、以及其他样式、目录、service等等一系列编码相关的沉淀，用什么样的方式，能够避免我们的重复劳动？

3、甚至每个公司的技术选型不一样，可能一个团队即用react、又用vue，既有c端业务，也有b端业务！

有没有一种方式，能够满足以上的需求？答案是可以的，我们可以用自研脚手架的方式来实现以上需求！

1、脚手架工具的原理

第一、首先要明白，脚手架的基本功能，一个是提供命令行服务、一个是提供模板。

所谓的命令行，就像vue-cli提供的vue init命令等等。

模板，也就是我们通过一个命令，得到最终的项目结构，这个模板可以直接放在教授架的某个目录下，也可以放在类似github的仓库上。

脚手架项目，本质上是一个node项目，大家知道，node是可以操作文件的，所以脚手架的本质，是对文件的操作。

第二、命令行操作的本质是什么？

nodejs内置了对命令行操作的支持，node工程下 package.json 中的 bin 字段可以定义命令名和关联的执行文件。

"bin": {
    "wd": "index.js"
},

第三、模板是怎么来的？

如果嫌麻烦，直接在脚手架的项目中，新建一个template目录，里面放置我们的项目结构，然后当我们执行命令行的时候，直接通过操作文件的方式，进行模板创建。

另一个方式，是直接在github上，放一个模板仓库，然后使用node提供的包（download-git-repo），下载这个仓库文件。

下面的几个包需要关注一下，是脚手架工具的关键：

1、commander.js

这个命令提供了自动的解析命令和参数，合并多选项，处理短参等等功能。

可以编写.command 为你的最高层命令指定子命令。

可以编写.action 对你的子命令进行相应处理。

const program = require('commander');
program.version('1.0.0', '-v, --version')
    .command('init <name>')
    .action((name) => {
        // 处理
    })

具体中文文档：github.com/tj/commande…

2、inquirer

这个node包，可以在node的命令行，询问相关的答案。可供我们后续的使用。

inquirer.prompt([
    {
        name: 'description',
        message: '请输入项目描述：'
    },
    {
        name: 'author',
        message: '请输入作者名称：'
    },
    {
        name: 'template',
        message: '请输入模板类型（pc/mobile）：'
    }
]).then((answers) => {
    // 根据答案进行处理
})

3、download-git-repo

这个包的功能是，可以向github/gitlab上的项目，下载下来。

const download = require('download-git-repo');
const TEMPLATE = 'https://github.com:liwudi/vue-mobile-template#master';
// 这是一个github地址
download(TEMPLATE, name, {clone: true}, (err) => {
    // 下载之后...
})

2、社区脚手架方案

第一种方案：自己开发node包

也就是我上面所写的方案，创建一个项目，发布node包。

所有的功能，自己实现。

第二种方案：Yeman

是社区的一个脚手架方案，里面集成了一些对脚手架的支持。

如果大家有兴趣，可以试试

两种方案的对比：

第一种方案，所有的东西，都要自己实现，好处就是所有的功能，任意自己发挥。

第二种方案，需要全局安装yo包，然后在实现自己的generator，个人感觉不是很方便。

3、个人实践

以上两种，个人都有自己的实践

第一种方案

git地址：github.com/mapbar-fron…

介绍：该方案是自己以后会长期维护的方案，里面集成了四种模板仓库，分为react、vue两种框架，不同框架又分为pc、mobile两种类型的模板。

基本使用：

第一步、下载全局cli工具包

npm i -g wd-tools-cli

第二步、初始化项目

wd init <name>

其中，name为你的项目名称

第三步、选择框架类型和模板类型

第四步、完成，并且可以开始启动你的项目

第二种方案

git地址：github.com/mapbar-fron…

介绍：算是一个demo性质的项目，如果有兴趣的可以研究一下

First, install Yeoman and generator-wdcli using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-wdcli

Then generate your new project:

yo wdcli

脚手架工具打造