在vue中使用node-cli实现终端数据展示并输入,以及体验项目中未采用的依赖

原创
小哥 3年前 (2022-11-16) 阅读数 10 #大杂烩

首先在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(

选择所需的环境)); // 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(
 选择完成

)); 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(
选择要启动的所需模块));
console.log(chalk.magenta(  空间是多种选择, 输入以确认 ));
// 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(
 选择完成

)); 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文档
达到的效果如图所示

上面的数组是未使用的依赖项集合。

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除