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

分享

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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,

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中…(img-nOR7mNEx-1715230943316)]

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

[外链图片转存中…(img-1zIJktiH-1715230943317)]