在 Web 前端开发过程中，常常需要借助 npm 包来进行开发、调试以及部署，这使得我们的开发效率大大提高。其中，friendly-errors-plugin 是一个可以帮助我们在命令行中更友好地显示错误信息的 npm 包。下面，我们就来详细介绍一下它的使用方法。
安装
我们可以通过 npm 命令来安装 friendly-errors-plugin：
npm install friendly-errors-webpack-plugin --save-dev
配置
在 webpack 的配置文件中，我们需要使用 friendly-errors-plugin，并在 plugins 中添加它：
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
module.exports = {
// ...
plugins: [
new FriendlyErrorsPlugin()
]
}原理
friendly-errors-plugin 的实现原理并不复杂，它通过对 webpack 执行错误的捕获和处理，使得在命令行中显示的错误信息更加友好，如下图所示：
在下面，我们将详细讲解如何使用它来进行前端开发。
使用
在使用 friendly-errors-plugin 时，我们可以完全按照上述的配置方式来添加它，并在命令行中使用 webpack 执行编译任务，同时 friendly-errors-plugin 会自动根据报错信息来进行友好的输出。
但是，为了更好地使用 friendly-errors-plugin，我们可以进行下面的一些进一步配置：
清空命令行
在使用 webpack 进行编译时，命令行中的输出可能非常繁杂，如果能够将之前的所有输出都清空并重新输出，那么我们就能够更加清晰地看到出错信息。friendly-errors-plugin 提供了 clearConsole 参数，可以帮助我们完成这个操作：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------
------------- ----
--
-
-配置图标
在输出错误信息时，friendly-errors-plugin 可以添加一些图标，用于表示错误的类型，也可以自定义图标和颜色。我们可以通过以下代码来进行配置：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------
--------- -------- ---------- ------- -
----- -------- - ------------------------
----- ----------- - -------------------------
-----------------
------ -----------------
-------- -------- - - - - --------------------
--------- -------------- -- ---
-- ----- -------------------- -----------
------ -----
----- -----
-------- ----
--
-
--
-
-可以看到，在 onErrors 函数中，我们使用 node-notifier 进行了通知的操作，其中 title、message、subtitle、icon 等属性可以根据自己的需求进行更改。
总结
在前端开发中，友好的错误信息展示方式对于提高我们的开发效率和准确性来说，非常重要。通过学习本文，我们可以看到，friendly-errors-plugin 可以帮助我们更加清晰地查看错误信息，并且还可以进行其他一些增强和自定义的操作。希望大家能够熟练掌握这个 npm 包的使用方法，提高自己的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583b65