首页 > 编程语言 >用 nodejs 搭建脚手架

用 nodejs 搭建脚手架

时间:2022-09-28 14:01:57浏览次数:82  
标签:const log nodejs require name chalk console 脚手架 搭建

1 前言

1.1

像我们熟悉的 vue-cli,taro-cli 等脚手架,只需要输入简单的命令 taro init project,即可快速帮我们生成一个初始项目。在日常开发中,有一个脚手架工具可以用来提高工作效率。

1.2 为什么需要脚手架

  • 减少重复性的工作,从零创建一个项目和文件。
  • 根据交互动态生成项目结构和配置文件等。
  • 多人协作更为方便,不需要把文件传来传去。

1.3 怎样来搭建呢?

脚手架是怎么样进行构建的呢,我是借助了taro-cli 的思路。

1.4 本文的目标读者

  • 1 想要学习更多和了解更多的人
  • 2 对技术充满热情

2 搭建前准备

2.1 第三方工具

  • commander.js,可以自动的解析命令和参数,用于处理用户输入的命令。
  • download-git-repo,下载并提取 git 仓库,用于下载项目模板。
  • Inquirer.js,通用的命令行用户界面集合,用于和用户进行交互。
  • handlebars.js,模板引擎,将用户提交的信息动态填充到文件中。
  • ora,下载过程久的话,可以用于显示下载中的动画效果。
  • chalk,可以给终端的字体加上颜色。
  • og-symbols,可以在终端上显示出 √ 或 × 等的图标
相关nodejs进阶视频讲解进入学习

2.2 上手

2.2.1 新建一个文件夹,然后npm init初始化

npm 不单单用来管理你的应用和网页的依赖,你还能用它来封装和分发新的 shell 命令。

$ mkdir lq-cli
$ npm init 

这时在我们的 lq-cli 项目中有 package.json 文件,然后需要创建一个 JS 文件包含我们的脚本就取名 index.js 吧。 package.json 内容如下

{
  "name": "lq-shell",
  "version": "1.0.0",
  "description": "脚手架搭建",
  "main": "index.js",
  "bin": {
    "lq": "./index.js"
  },
  "scripts": {
    "test": "test"
  },
  "keywords": [
    "cli"
  ],
  "author": "prune",
  "license": "ISC"
}


index.js内容如下

#!/usr/bin/env node

console.log('Hello, cli!');


到这一步就可以简单运行一下这个命令

npm link
lq

npm link 命令可以将一个任意位置的 npm 包链接到全局执行环境,从而在任意位置使用命令行都可以直接运行该 npm 包。 控制台会输出Hello, cli!

2.2.2 捕获init之类的命令

前面的一个小节,可以跑一个命令行了,但是我们看到的 taro-cli 中还有一些命令,init初始化项目之类。这个时候 commander 就需要利用起来了。 运行下面的这个命令将会把最新版的 commander 加入 package.json

npm install --save commander

引入 commander 我们将 index.js 做如下修改

#!/usr/bin/env node

console.log('Hello, cli!')

const program = require('commander')
program
  .version(require('./package').version, '-v, --version')    
  .command('init <name>')
  .action((name) => {
      console.log(name)
  })

program.parse(process.argv)

可以通过 lq -v 来查看版本号 通过 lq init name 的操作,action里面会打印出name

2.2.3 对console的美工

我们看到taro init 命令里面会有一些颜色标识,就是因为引入了chalk这个包,同样和 commander 一样

npm install --save chalk

console.log(chalk.green('init创建'))

这样会输出一样绿色的

2.2.4 模板下载

download-git-repo 支持从 Github下载仓库,详细了解可以参考官方文档。

npm install --save download-git-repo

download() 第一个参数就是仓库地址,详细了解可以看官方文档

2.2.5 命令行的交互

命令行交互功能可以在用户执行 init 命令后,向用户提出问题,接收用户的输入并作出相应的处理。用 inquirer.js 来实现。

npm install --save inquirer

index.js文件如下

#!/usr/bin/env node
const chalk = require('chalk')
console.log('Hello, cli!')
console.log(chalk.green('init创建'))
const program = require('commander')
const download = require('download-git-repo')
const inquirer = require('inquirer')
program
  .version(require('./package').version, '-v, --version')    
  .command('init <name>')
  .action((name) => {
      console.log(name)
      inquirer.prompt([
        {
            type: 'input',
            name: 'author',
            message: '请输入你的名字'
        }
      ]).then((answers) => {
        console.log(answers.author)
        download('',
          name, {clone: true}, (err) => {
          console.log(err ? 'Error' : 'Success')
        })
      })

  })
program.parse(process.argv)

2.2.6 ora进度显示

npm install --save ora

相关命令可以如下

const ora = require('ora')
// 开始下载
const proce = ora('正在下载模板...')
proce.start()

// 下载失败调用
proce.fail()

// 下载成功调用
proce.succeed()

2.2.6 log-symbols 在信息前面加上 √ 或 × 等的图标

npm install --save log-symbols

相关命令可以如下

const chalk = require('chalk')
const symbols = require('log-symbols')
console.log(symbols.success, chalk.green('SUCCESS'))
console.log(symbols.error, chalk.red('FAIL'))

2.2.7 完整文件如下

#!/usr/bin/env node
const chalk = require('chalk')
console.log('Hello, cli!')
console.log(chalk.green('init创建'))
const fs = require('fs')
const program = require('commander')
const download = require('download-git-repo')
const inquirer = require('inquirer')
const ora = require('ora')
const symbols = require('log-symbols')
const handlebars = require('handlebars')
program
  .version(require('./package').version, '-v, --version')
  .command('init <name>')
  .action(name => {
    console.log(name)
    inquirer
      .prompt([
        {
          type: 'input',
          name: 'author',
          message: '请输入你的名字'
        }
      ])
      .then(answers => {
        console.log(answers.author)
        const lqProcess = ora('正在创建...')
        lqProcess.start()
        download(
          'direct:https://github.com/Chant-Lee/rick-cli-templates1.git',
          name,
          { clone: true },
          err => {
            if (err) {
              lqProcess.fail()
              console.log(symbols.error, chalk.red(err))
            } else {
              lqProcess.succeed()
              const fileName = `${name}/package.json`
              const meta = {
                name,
                author: answers.author
              }
              if (fs.existsSync(fileName)) {
                const content = fs.readFileSync(fileName).toString()
                const result = handlebars.compile(content)(meta)
                fs.writeFileSync(fileName, result)
              }
              console.log(symbols.success, chalk.green('创建成功'))
            }
          }
        )
      })
  })
program.parse(process.argv)


总结

通过上面的例子只是能够搭建出一个简单的脚手架工具,其实bash还可以做很多东西,比如 npm 包优雅地处理标准输入、管理并行任务、监听文件、管道流、压缩、ssh、git等,要想了解更多,就要深入了解,这里只是打开一扇门,学海无涯。

1.1

像我们熟悉的 vue-cli,taro-cli 等脚手架,只需要输入简单的命令 taro init project,即可快速帮我们生成一个初始项目。在日常开发中,有一个脚手架工具可以用来提高工作效率。

1.2 为什么需要脚手架

  • 减少重复性的工作,从零创建一个项目和文件。
  • 根据交互动态生成项目结构和配置文件等。
  • 多人协作更为方便,不需要把文件传来传去。

1.3 怎样来搭建呢?

脚手架是怎么样进行构建的呢,我是借助了taro-cli 的思路。

1.4 本文的目标读者

  • 1 想要学习更多和了解更多的人
  • 2 对技术充满热情

2 搭建前准备

2.1 第三方工具

  • commander.js,可以自动的解析命令和参数,用于处理用户输入的命令。
  • download-git-repo,下载并提取 git 仓库,用于下载项目模板。
  • Inquirer.js,通用的命令行用户界面集合,用于和用户进行交互。
  • handlebars.js,模板引擎,将用户提交的信息动态填充到文件中。
  • ora,下载过程久的话,可以用于显示下载中的动画效果。
  • chalk,可以给终端的字体加上颜色。
  • og-symbols,可以在终端上显示出 √ 或 × 等的图标
相关nodejs进阶视频讲解进入学习

2.2 上手

2.2.1 新建一个文件夹,然后npm init初始化

npm 不单单用来管理你的应用和网页的依赖,你还能用它来封装和分发新的 shell 命令。

$ mkdir lq-cli
$ npm init 

这时在我们的 lq-cli 项目中有 package.json 文件,然后需要创建一个 JS 文件包含我们的脚本就取名 index.js 吧。 package.json 内容如下

{
  "name": "lq-shell",
  "version": "1.0.0",
  "description": "脚手架搭建",
  "main": "index.js",
  "bin": {
    "lq": "./index.js"
  },
  "scripts": {
    "test": "test"
  },
  "keywords": [
    "cli"
  ],
  "author": "prune",
  "license": "ISC"
}


index.js内容如下

#!/usr/bin/env node

console.log('Hello, cli!');


到这一步就可以简单运行一下这个命令

npm link
lq

npm link 命令可以将一个任意位置的 npm 包链接到全局执行环境,从而在任意位置使用命令行都可以直接运行该 npm 包。 控制台会输出Hello, cli!

2.2.2 捕获init之类的命令

前面的一个小节,可以跑一个命令行了,但是我们看到的 taro-cli 中还有一些命令,init初始化项目之类。这个时候 commander 就需要利用起来了。 运行下面的这个命令将会把最新版的 commander 加入 package.json

npm install --save commander

引入 commander 我们将 index.js 做如下修改

#!/usr/bin/env node

console.log('Hello, cli!')

const program = require('commander')
program
  .version(require('./package').version, '-v, --version')    
  .command('init <name>')
  .action((name) => {
      console.log(name)
  })

program.parse(process.argv)

可以通过 lq -v 来查看版本号 通过 lq init name 的操作,action里面会打印出name

2.2.3 对console的美工

我们看到taro init 命令里面会有一些颜色标识,就是因为引入了chalk这个包,同样和 commander 一样

npm install --save chalk

console.log(chalk.green('init创建'))

这样会输出一样绿色的

2.2.4 模板下载

download-git-repo 支持从 Github下载仓库,详细了解可以参考官方文档。

npm install --save download-git-repo

download() 第一个参数就是仓库地址,详细了解可以看官方文档

2.2.5 命令行的交互

命令行交互功能可以在用户执行 init 命令后,向用户提出问题,接收用户的输入并作出相应的处理。用 inquirer.js 来实现。

npm install --save inquirer

index.js文件如下

#!/usr/bin/env node
const chalk = require('chalk')
console.log('Hello, cli!')
console.log(chalk.green('init创建'))
const program = require('commander')
const download = require('download-git-repo')
const inquirer = require('inquirer')
program
  .version(require('./package').version, '-v, --version')    
  .command('init <name>')
  .action((name) => {
      console.log(name)
      inquirer.prompt([
        {
            type: 'input',
            name: 'author',
            message: '请输入你的名字'
        }
      ]).then((answers) => {
        console.log(answers.author)
        download('',
          name, {clone: true}, (err) => {
          console.log(err ? 'Error' : 'Success')
        })
      })

  })
program.parse(process.argv)

2.2.6 ora进度显示

npm install --save ora

相关命令可以如下

const ora = require('ora')
// 开始下载
const proce = ora('正在下载模板...')
proce.start()

// 下载失败调用
proce.fail()

// 下载成功调用
proce.succeed()

2.2.6 log-symbols 在信息前面加上 √ 或 × 等的图标

npm install --save log-symbols

相关命令可以如下

const chalk = require('chalk')
const symbols = require('log-symbols')
console.log(symbols.success, chalk.green('SUCCESS'))
console.log(symbols.error, chalk.red('FAIL'))

2.2.7 完整文件如下

#!/usr/bin/env node
const chalk = require('chalk')
console.log('Hello, cli!')
console.log(chalk.green('init创建'))
const fs = require('fs')
const program = require('commander')
const download = require('download-git-repo')
const inquirer = require('inquirer')
const ora = require('ora')
const symbols = require('log-symbols')
const handlebars = require('handlebars')
program
  .version(require('./package').version, '-v, --version')
  .command('init <name>')
  .action(name => {
    console.log(name)
    inquirer
      .prompt([
        {
          type: 'input',
          name: 'author',
          message: '请输入你的名字'
        }
      ])
      .then(answers => {
        console.log(answers.author)
        const lqProcess = ora('正在创建...')
        lqProcess.start()
        download(
          'direct:https://github.com/Chant-Lee/rick-cli-templates1.git',
          name,
          { clone: true },
          err => {
            if (err) {
              lqProcess.fail()
              console.log(symbols.error, chalk.red(err))
            } else {
              lqProcess.succeed()
              const fileName = `${name}/package.json`
              const meta = {
                name,
                author: answers.author
              }
              if (fs.existsSync(fileName)) {
                const content = fs.readFileSync(fileName).toString()
                const result = handlebars.compile(content)(meta)
                fs.writeFileSync(fileName, result)
              }
              console.log(symbols.success, chalk.green('创建成功'))
            }
          }
        )
      })
  })
program.parse(process.argv)


总结

通过上面的例子只是能够搭建出一个简单的脚手架工具,其实bash还可以做很多东西,比如 npm 包优雅地处理标准输入、管理并行任务、监听文件、管道流、压缩、ssh、git等,要想了解更多,就要深入了解,这里只是打开一扇门,学海无涯。

标签:const,log,nodejs,require,name,chalk,console,脚手架,搭建
From: https://blog.51cto.com/u_15785991/5719229

相关文章

  • 深度阐述Nodejs模块机制
    我们都知道Nodejs遵循的是CommonJS规范,当我们require('moduleA')时,模块是怎么通过名字或者路径获取到模块的呢?首先要聊一下模块引用、模块定义、模块标识三个概念。1Comm......
  • 深度阐述Nodejs模块机制
    我们都知道Nodejs遵循的是CommonJS规范,当我们require('moduleA')时,模块是怎么通过名字或者路径获取到模块的呢?首先要聊一下模块引用、模块定义、模块标识三个概念。1Commo......
  • 用 nodejs 搭建脚手架
    1前言1.1像我们熟悉的vue-cli,taro-cli等脚手架,只需要输入简单的命令taroinitproject,即可快速帮我们生成一个初始项目。在日常开发中,有一个脚手架工具可以用来提高......
  • 搭建个人网站(本地服务器)
    学习视频:A.搭建虚拟机:https://www.bilibili.com/video/BV1dW411M7xL/ ----8,9集或:https://www.bilibili.com/video/BV1nx411q76v/B:搭建宝塔服务:https://www.bilibili......
  • vue3脚手架中ts无法识别引入的vue文件,提示找不到xxx.vue模块的解决
    使用vite搭建vue3脚手架的时候,发现main.ts中引入App.vue编辑器会报错,但是不影响代码运行。报错信息:TS2307:Cannotfindmodule'./App.vue'oritscorrespondingtyped......
  • 实现ARM+ROS(机器人操作系统)之环境搭建!
      如何低成本搭建ARM+ROS的硬件载体?上文为大家介绍了实现的思路及原理,本文将为读者实际操作,展示ROS部署前的筹备工作及步骤分解。 1. 方案概述 本文重点介绍低......
  • 50、ubuntu18.04&20.04+CUDA11.1+cudnn11.3+TensorRT7.2+Deepsteam5.1+vulkan环境搭建
    基本思想:想学习一下TensorRT的使用,随笔记录一下;链接:https://pan.baidu.com/s/1uFOktdF-bHcDDsufIqmNSA 提取码:k55w 复制这段内容后打开百度网盘手机App,操作更方便哦记录......
  • vue3+vant+vue-router+axios+pinia+vite框架搭建
    vue3的官网地址:https://cn.vuejs.org/;这里要说一下,vue3不支持IE11,如果要兼容IE11及其一下,不建议使用vue3。创建vue脚手架,如果你需要使用ts,则需要node版本>=16。本文按照......
  • Vue环境搭建
    初学Vue的写法,发现Vue是真的非常方便,如果说Jquery是简化了dom操作,那Vue就是封装了dom,通过数据绑定进行获取数据,大大简化了开发中js获取前台数据的流程和操作。下面是我的......
  • 1.环境搭建
    一、互联网项目教育网站:菜鸟教程、慕课网、博学谷视频网站:爱奇艺、优酷土豆、腾讯视频交友网站:世纪佳缘、百合网医疗网站:旅游网站:携程、驴妈妈、途牛、去哪儿、马蜂......