从零搭建前端脚手架

VinsonHe
260 阅读5分钟

前言

脚手架的搭建是前端工程化不可或缺的一部分，因为近期公司有多个新项目需要用到同一套模板代码，并且模板可能后续还会有变动，因此选择将其加入Git版本库，并通过脚手架来进行模板代码的创建。

一、前置工作

脚手架这个词听起来很抽象，在该例子里实际上可以将其当成一串脚本，通过执行这串脚本去拉去服务器上的模板代码到本地。以下是搭建脚手架常用到的一些依赖库

依赖库作用
commander编写指令，处理命令行
inquirer交互式命令行工具，可以让用户输入或者选择选项
chalk修改控制台输出样式，可以修改文字颜色等
ora可以显示下载时的loading动画
download-git-repo下载远程模板，支持从github,gitlab等下载

1. commander

该依赖库可以用来编写指令和处理指令，简单来说就是定义一些指令，并对这些指令执行相对应的操作，简单用法如下

const program = require('commander');
program
 .command('init')
 .description('create an empty project with Vue3 + ts + pinia')
 .action(function () {
 
 });

上述代码定义了一个 init 指令（command），对应的描述（description），以及命令行输入该指令后执行的回调函数

2. inquirer

想必大家平常在使用官方脚手架的时候，在执行完安装命令后，命令行会提示你输入一些信息以及进行一些配置选择，这个依赖库的作用也是如此，以下是该库常用的一些用法

const inquirer = require('inquirer'); 
const question = [
    {
        name: 'name',
        message: '请输入项目名称？',
    }
]
inquirer.prompt(question).then(answer => { 
        
});

上述代码定义了一个问题列表，在回调函数中可以获取到上述回答列表里用户的键入结果，以对象键值对的形式返回。

3. chalk

这个库是用来改变控制台输出内容样式的，用来做样式美化，简单用法如下

const chalk = require('chalk');
console.log(chalk['red']('hello,world'));

上述代码输出的文字就将变成红色

4. ora

这个库是用来在控制台显示loading动画的，也是用来做美化的

const ora = require('ora')
let loading = ora('下载中...')
loading.start()

上述代码将在控制台显示一个loading动画

5. download-git-repo

该依赖库可以用来进行远程下载，可以从github上下载代码库，也是该脚手架的核心库。

const download = require('download-git-repo')
download(repository, destination, options, callback)

该方法有4个主要的参数

  1. repository 是仓库地址
  2. destination 是存放路径
  3. options可选参数，常用 {clone:boolean} 可以用来指明是否使用git clone来进行下载
  4. callback，当下载任务结束后将执行该回调函数，有可能下载失败

二、目录构建

在了解脚手架所使用的一些主要依赖库后就可以着手开始搭建目录了。本文以 nice-cli 为例

  1. 首先创建一个文件夹名为nice-cli

  2. 在该目录下打开命令行，执行npm init指令创建package.json配置文件，期间会让你输入包名称，版本号等，默认全部回车就行

  3. 生成package.json文件后添加 dependencies 配置项，并执行npm install 安装上述依赖库

  "dependencies": {
    "chalk": "^4.0.0",
    "commander": "^5.1.0",
    "download-git-repo": "^3.0.2",
    "inquirer": "^7.1.0",
    "ora": "^5.1.0"
  }
  1. 创建一个bin文件夹，并新建一个nice文件。文件内容如下
#!/usr/bin/env node
console.log('hello world');

第一行代码的作用主要是为了让系统识别到该行代码后按照该路径去查找node并执行

随后我们在package.json中进行命令配置

"bin": {
  "nice-cli": "bin/nice"
}

然后执行 npm link 指令即可将 nice-cli 这个指令挂载到全局，后面只要输入 nice-cli 就可以自动执行bin文件夹下的 nice 脚本。

  1. 最后我们来编写nice脚本中的具体内容
#!/usr/bin/env node
const program = require('commander');
const inquirer = require('inquirer');
const ora = require('ora')
const download = require('download-git-repo')
const chalk = require('chalk')
const spinner = ora("Downloading...");
//定义交互数据
const question = [
    {
        name: 'name',
        message: '请输入项目名称？',
    }
]
program
    .command('init')
    .description('create an empty project')
    .action(function () {
        //控制台输出绿色文字
        console.log(chalk['green']('⭐⭐欢迎使用前端脚手架工具⭐⭐\n'));
        
        //开启命令行交互
        inquirer.prompt(question).then(answer => {
            //answer中可获取到用户键入结果{name:'项目名称'}
            
            spinner.start(); //开启loading动画
            let url = 'hewensen/babylon'; //git仓库地址
            
            //从远程仓库下载代码库
            download(
                url,
                answer.name,
                err => {
                    if (err) {
                        spinner.fail();
                        console.log(chalk['red'](`安装失败，原因： ${err}`));
                        return;
                    }
                    spinner.succeed();
                    console.log(chalk['green'](`\n ⭐安装完成 completed⭐!`));
                }
            )
        })
    })
program.parse(process.argv)
  1. 最后需要做的就是将其发布到 npm 上以便其他同事也可以使用，当然在发布前需要对node_modules进行过滤，否则其也会被传到npm仓库里。在文件夹下新建 .npmignore 文件并添加如下内容
/node_modules

随后需要去 NPM官网 注册一个账号，本文不赘述了。最后在目录的命令行下执行 npm login 登录npm账号后执行 npm publish 即可将其发布到npm官网上去。当然前提是nice-cli这个名字没有被占用。

其他同事想使用的话只需要执行 npm i nice-cli -g 进行全局安装，安装成功后执行 nice-cli init 指令即可使用该脚手架。

本文是关于脚手架搭建最基本的介绍，当然脚手架的搭建所涵盖的内容远远不止这些。感兴趣的同学可以继续往这个方向深究。

avatar
文章
阅读
粉丝