从0开始搭建一套脚手架cli工具(二)

简介: 从0开始搭建一套脚手架cli工具

六、 shell实现拉取代码(或者用download-git-repo)


同样还是在index.js中,拉取代码到本地。

const initAction = () => {
  inquirer.prompt(
    question.create
  ).then( async answers => {
    // shell脚本
    console.log('项目名为:', answers.name);
    console.log('正在拷贝项目,请稍等-------')
    const remote = "https://github.com/zbsguilai/catui.git"//克隆地址
    const currentName = "guilai-test"
    const targetName = answers.name;
    shell.exec(`
      git clone ${remote} --depth=1
      mv ${currentName} ${targetName}
      rm -rf ./${targetName}/.git
      cd ${targetName}
      yarn
    `, (error, stdout, stderr) => {
      if (error) {
        console.error(`exec error:${error}`)
      }
      console.log(stdout)
      console.log(stderr)
      console.log("项目拷贝成功啦---------")
    })
  }).catch(error => {
    red(`❌ 程序出错 ❌`)
    process.exit(1);
  });
}

七、download-git-repo实现拉取代码(或者用shelljs)



在bin下新建create文件

  • process.exit(code)方法用于通过NodeJS中的退出代码结束同时运行的进程。
    参数:code:它可以是0或1。0表示没有任何类型的故障结束进程,而1表示由于某种故障而结束进程。
const download = require('download-git-repo')
const ora = require('ora')
const fse = require('fs-extra')
const handlebars = require('handlebars')
const myChalk = require('chalk')
const { red, yellow, green } = myChalk
function createProject(project) {
  //获取用户输入,选择的信息
  const { template, name, desc } = project;
  const spinner = ora("正在拉取框架...");
  spinner.start();
  download(template, name,{ clone: true }, async err => {
    if (err) {
      red(err);
      spinner.text = red(`拉取失败. ${err}`)
      spinner.fail()
      process.exit(1);
    } else {
      spinner.text = green(`拉取成功...`)
      spinner.succeed()
      spinner.text = yellow('请稍等,. 正在替换package.json中的项目名称、描述...')
      const multiMeta = {
        project_name: name,
        project_desc: desc
      }
      const multiFiles = [
        `${name}/package.json`
      ]
      // 用条件循环把模板字符替换到文件去
      for (var i = 0; i < multiFiles.length; i++) {
        // 这里记得 try {} catch {} 哦,以便出错时可以终止掉 Spinner
        try {
          // 等待读取文件
          const multiFilesContent = await fse.readFile(multiFiles[i], 'utf8')
          // 等待替换文件,handlebars.compile(原文件内容)(模板字符)
          const multiFilesResult = await handlebars.compile(multiFilesContent)(multiMeta)
          // 等待输出文件
          await fse.outputFile(multiFiles[i], multiFilesResult)
        } catch (err) {
          // 如果出错,Spinner 就改变文字信息
          spinner.text = red(`项目创建失败. ${err}`)
          // 终止等待动画并显示 X 标志
          spinner.fail()
          // 退出进程
          process.exit(1)
        }
      }
      // 如果成功,Spinner 就改变文字信息
      spinner.text = yellow(`项目已创建成功!`)
      // 终止等待动画并显示 ✔ 标志
      spinner.succeed()
    }
  });
}
module.exports = createProject

index.js

const initAction = () => {
  inquirer.prompt(
    question.create
  ).then( async answers => {
    if (answers.conf) {
      createProject(answers)
    } else {
      red(`🆘 您已经终止此操作 🆘`)
    }
  }).catch(error => {
    red(`❌ 程序出错 ❌`)
    process.exit(1);
  });
}

八、NPM发布


在此之前,博主有详细介绍将本地项目发布到npm,详细见本人底部

npm login//登录
npm publish//发布
• 1
• 2


九、优化脚手架


  • 使用ora实现动画效果(见上)
  • 使用chalk美化字体(见上)


十、常见错误


附:如何实现一个公共组件库上传到npm并在项目中使用

目录
相关文章
|
5月前
|
JavaScript 开发者
入职必会-开发环境搭建30-Vue-cli环境下载和安装
Vue CLI(Vue Command Line Interface)是一个官方发布的用于快速搭建基于 Vue.js 开发环境的工具。它可以帮助开发者快速搭建 Vue 项目、进行项目配置、构建等操作,让开发过程更加高效。
|
7月前
|
JavaScript 前端开发 容器
脚手架cli3
脚手架cli3
|
7月前
|
存储 前端开发 数据可视化
开源推荐! yite-cli, 基于vite的开箱即用的项目脚手架
开源推荐! yite-cli, 基于vite的开箱即用的项目脚手架
99 1
|
7月前
|
JavaScript 前端开发 Java
Vue CLI脚手架安装、搭建、配置 和 CLI项目分析
Vue CLI脚手架搭建和分析 详解。
166 0
|
资源调度 JavaScript 前端开发
vue-cli安装与搭建SPA项目
vue-cli安装与搭建SPA项目
92 0
|
JavaScript
小白如何搭建vue-cli项目
小白如何搭建vue-cli项目
54 0
|
开发框架
从0搭建Vue3组件库(十):如何搭建一个 Cli 脚手架
本篇文章将实现一个名为create-easyest脚手架的开发,只需一个命令npm init easyest就可以将整个组件库开发框架拉到本地。
332 0
|
设计模式 前端开发 JavaScript
vee-cli脚手架实践(下)
vee-cli脚手架实践
72 0
|
前端开发 JavaScript 搜索推荐
vee-cli脚手架实践(上)
vee-cli脚手架实践
83 0
|
JSON 前端开发 JavaScript
vee-cli脚手架实践(中)
vee-cli脚手架实践
71 0