在vue中使用node-cli实现终端信息展示并输出,以及展示项目中未使用的依赖

首先在package.json中配置自己js文件的路径

在这里插入图片描述

单选框信息选择

我做的是一个多选一个是单选,
首先引入几个使用到的包

npm install chalk
npm install figlet
npm install clear
npm install enquirer

switch.js

const clear = require('clear');
const chalk = require('chalk');
const figlet = require('figlet');
const switchQuestions = require('./switchQuestions');

clear();
console.log(chalk.blueBright.bold(figlet.textSync('Env Switch', { horizontalLayout: 'full' })));
console.log(chalk.cyanBright('\n 选择需要的环境'));
// Module Question
switchQuestions();

switchQuestions.js

const enquirer = require('enquirer');
const clear = require('clear');
const chalk = require('chalk');
const figlet = require('figlet');

const moduleQuestions = () => {
  const questions = [
    {
      type: 'select',
      name: 'env',
      message: '请选择要切换的环境',
      choices: ['测试环境', '开发环境'],
    },
    {
      type: 'input',
      name: 'suggestion',
      message: '有什么建议可以提供?',
    },
  ];

  enquirer.prompt(questions).then((ans) => {
    clear();
    console.log(chalk.blueBright.bold(figlet.textSync('Env Switch', { horizontalLayout: 'full' })));
    console.log(chalk.cyanBright('\n\t 选择完成\n'));
    console.log(ans);
  });
};

module.exports = moduleQuestions;

在这里插入图片描述
在这里插入图片描述

复选框信息

代码部分基本和switch.js类似, 具体每个类型的写法可以参考下面的官方文档

enquirer官方英文文档

module.js

const clear = require('clear');
const chalk = require('chalk');
const figlet = require('figlet');
const moduleQuestions = require('./moduleQuestions');

clear();
console.log(
  chalk.blueBright.bold(figlet.textSync('Aze Modules Helper', { horizontalLayout: 'full' })),
);
console.log(chalk.cyanBright('\n\t选择需要的模块进行启动'));
console.log(chalk.magenta('\t空格为多选, 回车为确认 '));
// Module Question
moduleQuestions();

moduleQuestions.js

const enquirer = require('enquirer');
const clear = require('clear');
const chalk = require('chalk');
const figlet = require('figlet');

const moduleQuestions = () => {
  const questions = [
    {
      type: 'multiselect',
      name: 'module',
      message: '请选择要启动的模块',
      limit: 7,
      choices: ['module A', 'module B', 'module C', 'module D', 'module E', 'module F', 'module G'],
    },
    {
      type: 'input',
      name: 'suggestion',
      message: '有什么建议可以提供?',
    },
  ];

  enquirer.prompt(questions).then((ans) => {
    clear();
    console.log(
      chalk.blueBright.bold(figlet.textSync('Aze Modules Helper', { horizontalLayout: 'full' })),
    );
    console.log(chalk.cyanBright('\n\t 选择完成\n'));
    console.log(ans);
  });
};

module.exports = moduleQuestions;

使用depcheck完成对依赖的扫描,并输出未使用的依赖

const depcheck = require('depcheck');
const config = require('../../../package.json');

const options = {
  ignoreBinPackage: false, // ignore the packages with bin entry
  skipMissing: false, // skip calculation of missing dependencies
  ignorePatterns: [
    // files matching these patterns will be ignored
    'sandbox',
    'dist',
    'bower_components',
  ],
  ignoreMatches: [
    // ignore dependencies that matches these globs
    'grunt-*',
  ],
  parsers: {
    // the target parsers
    '**/*.js': depcheck.parser.es6,
    '**/*.jsx': depcheck.parser.jsx,
  },
  detectors: [
    // the target detectors
    depcheck.detector.requireCallExpression,
    depcheck.detector.importDeclaration,
  ],
  specials: [
    // the target special parsers
    depcheck.special.eslint,

    depcheck.special.webpack,
  ],
  package: {
    // may specify dependencies instead of parsing package.json
    dependencies: config.dependencies,
    devDependencies: config.devDependencies,
    peerDependencies: {},
    optionalDependencies: {},
  },
};
class DependException {
  constructor(message) {
    this.message = message;
    this.name = 'DependException';
  }
}
function checkDependLen(depLen, devDepLen) {
  if (depLen > 0 || devDepLen > 0) {
    throw new DependException('项目中有未使用的依赖配置');
  }
}
depcheck('../vue3-todos', options).then((unused) => {
  console.log(unused.dependencies); // an array containing the unused dependencies
  console.log(unused.devDependencies); // an array containing the unused devDependencies
  // a lookup containing the dependencies missing in `package.json` and where they are used
  // console.log(unused.missing);
  // console.log(unused.using); // a lookup indicating each dependency is used by which files
  // console.log(unused.invalidFiles); // files that cannot access or parse
  // console.log(unused.invalidDirs); // directories that cannot access
  try {
    checkDependLen(unused.dependencies.length, unused.devDependencies.length);
  } catch (e) {
    console.error(e);
  }
});

这个也是有官方文档的, 我把链接贴出来 depcheck文档
实现的效果如图
在这里插入图片描述
上面的数组就是未使用的依赖集合

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值