从0到1建立自己的脚手架一

2,014 阅读5分钟

结果展示

cmd执行命令行

npm install mcf-cli -g  //全局安装mcf脚手架

mcf -V                  //查看mcf版本

mcf add                 //mcf添加模板

mcf list                //mcf查看模板列表

mcf init <模板名> [项目地址]    //根据模板创建项目

mcf delete <模板名>    //mcf删除模板

mcf create-vue test     //创建vue项目

上面几行命令行让你对mcf-cli有个印象,让你知道脚手架能做什么,和怎么做

出发点

自从自学了vue之后,总是被前端工程化的开发步骤惊叹,用Vue-cli从0搭建了一个Vue项目,一步一步配置,然后npm i, npm run dev,打开链接localhost:8080,一个网页就这么写好了,嘴里不自觉的吐出了两个字:'NB'。

随着学习和使用的不断深入,为什么我们自己不能搭个脚手架工具呢!想到就尝试着做吧!

脚手架的实质

如图:

4130084237-5bdf122f7196c_articlex.png
所示:

  1. 命令的解析,这个可以借助commander实现;
  2. 文件的操作,复制,粘贴,增加,删除,文件内容的新增,替换;这个可以借助fs-extra实现; 3.模板文件,就以自己对前端工程化粗浅的认识,写一个最牛(cu)逼(lou)的模板项目;

申请一个npm账号,这个不算实现的功能,算附属工作;

意义

随着前端工程化的概念越来越深入人心,脚手架的出现就是为减少重复性工作而引入的命令行工具,摆脱ctrl + c, ctrl + v,此话怎讲?

现在新建一个前端项目,已经不是在html头部引入css,尾部引入js那么简单的事了,css都是采用Sass或则Less编写,在js中引入,然后动态构建注入到html中;

除了学习基本的js,css语法和热门框架,还需要学习构建工具webpack,babel这些怎么配置,怎么起前端服务,怎么热更新;为了在编写过程中让编辑器帮我们查错以及更加规范,我们还需要引入ESlint;甚至,有些项目还需要引入单元测试(Jest)。

对于一个刚入门的人来说,这无疑会让人望而却步。

而前端脚手架的出现,就让事情简单化,一键命令,新建一个工程,再执行两个npm命令,跑起一个项目。

在入门时,无需关注配置什么的,只需要开心的写代码;另外,对于很多系统,他们的页面相似度非常高,所以就可以基于一套模板来搭建,虽然是不同的人开发,但用脚手架来搭建,相同的项目结构与代码书写规范,是很利于项目的后期维护的

准备知识

上了年纪,喜欢扯,扯远了,回归正题,动手做吧,首先我们要进行一些前期的准备工作:

1、commander库

commander.js是一个帮助快速开发Node.js命令行工具的包(库)

脚本解释程序:

#! /usr/bin/env node

在代码的开头第一行,必须指定我们的脚本执行所需要的解释程序, 目的是使用env来找到node,并使用node来作为程序的解释程序。

2、chalk插件

chalk是一个颜色的插件。可以通过chalk.blue(‘hello world’)来改变颜色

const chalk = require('chalk')
...
console.log(chalk.blue('Hello') + 'World' + chalk.red('!'));
console.log(chalk.blue.bgRed.bold('Hello world!'));
console.log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));

3、download-git-repo插件

download-git-repo是一个用来从git上下载项目的插件,基本用法如下: 参考详细用法上传送门

var download = require('download-git-repo');

download('这个参数?', '目标地址', function (err) {
  console.log(err ? 'Error' : 'Success')
})

4、ora插件

用来实现node.js命令行环境的loading效果,和显示各种状态的图标等

用法:

const ora = require('ora')
...
const spinner = ora(`正在下载项目模板`)
spinner.start()
...
spinner.fail()
...
spinner.succeed()

5、 inquirer插件

对于命令行交互的功能,可以用inquirer.js来处理。用法其实很简单:

const inquirer = require('inquirer') 

inquirer.prompt([
  {
    name: 'projectName',
    message: '请输入项目名称'
  }
]).then(answers => {
  console.log(`你输入的项目名称是:${answers.projectName}`)
})

prompt()接受一个问题对象的数据,在用户与终端交互过程中,将用户的输入存放在一个答案对象中,然后返回一个Promise,通过then()获取到这个答案对象。so easy!

6、 metalsmith插件

它就是一个静态网站生成器,可以用在批量处理模板的场景,类似的工具包还有Wintersmith、Assemble、Hexo。它最大的一个特点就是EVERYTHING IS PLUGIN(万物皆插件),所以,metalsmith本质上就是一个胶水框架,通过黏合各种插件来完成生产工作。

7、 handlebars模板

模板引擎我选择handlebars。当然,还可以有其他选择,例如ejs、jade、swig。

用handlebars的语法对模板做一些调整,例如修改模板中的package.json

8、 npm账号的注册

www.npmjs.com/signup 该网址注册,注册需要注意的坑,

username,password,email三者记清楚,什么时候需要用户名,什么时候需要密码,什么时候需要邮箱,填写的时候需要看清楚,别问我怎么知道的,多踩几次坑你就什么都知道了!

9、 npm包的创建、开发、发布

npm init  初始化项目

npm login  依次输入username,password,email

npm pubic 发布项目

以及其他的命令行

npm adduser
npm link
npm unlink

我能想到的暂时就这么多,有需要以后再加!

好处

让项目从"搭建-开发-部署"更加快速以及规范 不要让自己成为码畜, 既要会写还要懂原理