如何在上班时间利用终端控制台摸鱼??????

connygpt 2024-10-10 05:18 6 浏览

作为一个资深的摸鱼小能手，班我们每天要上，终端也是我们也要每天要用到的，那么有什么办法可以在控制台终端中去摸鱼呢，那么在接下来的文章中我们就来看看它可以做到怎么样摸鱼。

简介

在我们开发的项目中，几乎有很多项目要都是使用 webpack 作为构建工具来进行开发的，在它进行构建的时候，会有一些信息会输出在控制台上面，如下图所示：

爱瞎折腾的朋友们可能就会想了，为什么 create-react-pp 也是用的 webpack 作为构建工具，为什么我的输出和它的输出是不一样的呢？

compiler

通过查阅文档，我发现了问题所在，原来在 webpack 中它提供了一个 compiler 钩子，它用来监控文件系统的监听(watching) 机制，并且在文件修改时重新编译。当处于监听模式(watch mode)时， compiler 会触发诸如 watchRun, watchClose 和 invalid 等额外的事件。

done 钩子就是当我们的代码被编译完成的时候被调用的。

如何调用 done 钩子

要想调用我们的 done 钩子，首先我们要引入 webpack 包，并把 webpack 配置传递给 webpack 函数，如下图所示：

接下来我们看看终端输出：

这些就是我们的一些 webpack 配置，在这个 compiler 对象上，它存在一个 hooks 对象，如下代码所示：

compiler.hooks.done.tap("done", async (stats) => {
  console.log(11111111111111);
});

它会在代码编译完成阶段调用该回调函数:

咦，你会发现了，代码编译执行完成，我的终端上的输出会这么干净，是因为在输出控制台之前，已经被我调用了一个函数清空了。

通过这个函数，你可以情况控制台上的一些输出信息，如下代码所示：

function clearConsole() {
  process.stdout.write(
    process.platform === "win32" ? "\x1B[2J\x1B[0f" : "\x1B[2J\x1B[3J\x1B[H"
  );
}

再调用一下，你会发现控制台上面很干净的，如下图所示：

要想这一些个性化的输出,我们直接在这个回调函数中打印输出就可以了，如果你要你输出的信息和项目中的信息有关，你可以利用 stats 这个参数：

大概就这样子，如果你想更好玩的话，你可以使用一些网络请求库，去获取一些网络资源：

去获取这些资源都是可以的呀。

总结

如果你的项目是使用的 webpack，并且要想在项目的开发中自定义，你可以通过 compiler.hooks 的方式去监听不同的钩子，然后通过不同的方式来实现不同的信息输出。

原文链接：https://juejin.cn/post/7277065056575848448

控制台打印

上一篇：「Python打印输出」打印“Hello World”
下一篇：详解JAVA代码中的Scanner类—从控制台输入数据

如何在上班时间利用终端控制台摸鱼??????

简介

compiler

如何调用 done 钩子

总结

相关推荐

在.net core中使用nginx做负载均衡

React 18 超全升级指南

LTUI v1.7 发布，一个基于 Lua 的跨平台字符终端 UI 界面库

生成对抗网络(GAN)的半监督学习

《若依ruoyi》第二十五章:Spring boot 上传下载封装详解二

QT进阶之路 : 布局详解

如何在 Element UI 中使用栅格布局实现响应式设计?

IDEA 中 Jetty 的配置操作手册 idea jfinal

如何在Dify平台上创建智能Agent:一步步教你实现超级智能体搭建

k8s自动化运维三