前端搭建脚手架

搭建环境

初始化

npm init -y 安装依赖 npm i commander download-git-repo ora handlebars figlet clear chalk open -S 根目录创建脚本文件(在这里我的路径是./bin/index.js) 在index.js文件中添加以下内容

#!/usr/bin/env node // 为了防止用户node环境没有安装在该目录下，进行声明
const { Command } = require('commander');
const program = new Command();
program.version(require('../package.json').version);

program.command('init <name>').description('init project').action(require('../lib/init')); // action的参数是完成之后的回调函数

program.parse(process.argv); // 解析命令

在package.json文件添加bin字段

"bin": {
  "zoro": "./bin/index.js"
}

上面的步骤都完成之后，在当前目录下以管理员的身份执行npm link，这样刚才写的index.js文件内容将被注册安装到全局，可以在命令行使用zoro运行index.js文件中的代码 如果顺利的话，index.js文件中的console.log内容会被打印到命令行中，不顺利那就把命令行关闭了重新进入 接下来我们给脚手架弄一个欢迎界面，在根目录建立一个lib文件夹，里面创建一个init.js文件

const { promisify } = require('util');
const figlet = promisify((require('figlet'))); // 通过promisify将io流包装成Promise

const clear = require('clear');
const chalk = require('chalk');
const log = content => console.log(chalk.green(content)); // 将文字显示为绿色
const { clone } = require('./download');

const spawn = async (...args) => {
  // log流对接 子进程 到 主进程,这样命令行才能显示安装流程
  // 封装成Promise
  const { spawn } = require('child_process');
  return new Promise(resolve => {
    const proc = spawn(...args);
    // 子进程的输出和错误
    proc.stdout.pipe(process.stdout); 
    proc.stderr.pipe(process.stderr); 
    // 输出完成，执行回调
    proc.on('close', () => resolve());
  })
}

module.exports = async name => {
  // 打印欢迎界面
  clear(); // 清屏
  const data = await figlet('Zoro exists everywhere');
  log(data);
  log('🚀创建项目：' + name);
  // 克隆项目
  await clone('github:用户名/项目名', name);
  // 执行npm install
  log('安装依赖');
  await spawn('npm', ['install'])
  log(`${chalk.green('安装完成:')}
  ==========================
  ${chalk.blueBright(`cd ${name}
  npm run serve`)}
  ==========================
  `)
}

当脚手架制作完成后可以上传到npm上，供大家下载（前提要有npm账号，可以到npm官网注册） 在根目录新建一个publish.sh

#!/usr/bin/env bash
npm config get registry # 检查仓库镜像库
npm config set registry=http://registry.npmjs.org
echo '请进行登录操作'
npm login # 登录
echo '-----发布-----'
npm publish # 发布
npm config set registry=https://registry.npm.taobao.org # 设置为淘宝镜像
echo '发布完成'
exit

苹果电脑需要chmod +x publish.sh添加权限 然后直接命令行输入publish.sh就可以进行上传了