前端脚手架：从入门到进阶——CLI常用的npm包(三)

这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战

前言

cli免不了需要手动运行一些命令，或者打印一些提示，或者做一些比较、字符处理等，社区里已经有了一些非常优秀的轮子，这篇文章便介绍这些小工具。

命令

cli常常需要运行一些命令，虽然nodejs也提供了 child_process.spawn，但是有着跨平台的问题,下面推荐几个更好的工具

cross-spawn

create-react-app和umi都用了cross-spawn,api语法和child_process.spawn一样 同步用法

const spawn = require("cross-spawn");

const result = spawn.sync('npm', ['list',  '-depth', '0']);
console.log(result.output.join(''))

异步用法：

const child = spawn('npm', ['list',  '-depth', '0']);
child.stdout.on('data', (data) => {
    console.log(`stdout: ${data}`);
  });

execa

execa和cross-spawn类似，它的特点是提供了Promsie支持，@vue/cli用的就是它。

const execa = require('execa');
(async ()=>{
    const {stdout} = await execa('find', ["-name=*.js"]);
	console.log(stdout);
})()

shelljs

当需要运行一些linux命令,比如windows不支持的find命令，可以使用shelljs

var shell = require('shelljs');
console.log(shell.find('*.js').stdout)

也可以直接用它执行命令：

shell.exec(`cd ${process.cwd()}/ && yarn install`);

输出

类型明晰的log输出能让使用者更容易上手

chalk

create-react-app中大量使用了chalk给log增加颜色

 console.log(
        `    Only ${chalk.green('<project-directory>')} is required.`
      );
      console.log();
      console.log(
        `    A custom ${chalk.cyan('--scripts-version')} can be one of:`
      );

类似的还有colors

signale

如果觉得在console.log里拼不同颜色的字符串太麻烦了，还有一款开箱即用的log工具signale

const signale = require("signale");
 signale.success(
            `webpack配置已弹出，可自定义webpack配置，继续开发~`
          )

ora

一个展示loading的工具：

v6.x版本后ora是pure ESM的，node版本高于12.2，并且以import引入

import ora from 'ora'

const spinner = ora('Loading unicorns').start();

setTimeout(() => {
	spinner.color = 'yellow';
	spinner.text = 'Loading rainbows';
	setTimeout(()=>{
		spinner.succeed('success')
	},1000)
}, 1000);

工具

semver

版本比较工具，比如用来检测cli版本或node版本

const semver = require('semver')

semver.valid('1.2.3') // '1.2.3'
semver.valid('a.b.c') // null
semver.clean('  =v1.2.3   ') // '1.2.3'
semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') // true
semver.gt('1.2.3', '9.8.7') // false
semver.lt('1.2.3', '9.8.7') // true

change-case

字符串转换工具，可以轻易地将字符转转换成各种命名格式，比如

dotCase("test string"); 
//=> "test.string"

camelCase("test string");
//=> "testString"

globby

通配符匹配工具

import {globby} from 'globby';

(async () => {
	const paths = await globby('images', {
		expandDirectories: {
			files: ['cat', 'unicorn', '*.jpg'],
			extensions: ['png']
		}
	});

	console.log(paths);
	//=> ['cat.png', 'unicorn.png', 'cow.jpg', 'rainbow.jpg']
})();

minimist

解析命令参数和选项的便捷工具

var argv = require('minimist')(process.argv.slice(2));
console.log(argv);

$ node example/parse.js -x 3 -y 4 -n5 -abc --beep=boop foo bar baz
{ _: [ 'foo', 'bar', 'baz' ],
  x: 3,
  y: 4,
  n: 5,
  a: true,
  b: true,
  c: true,
  beep: 'boop' }

以上就是cli开发过程中比较常用的几个小工具，后续将一步步介绍如何开发一个cli。