介绍
随着前端开发的不断发展，现在的前端开发也不再只是简单的 HTML/CSS/JS，而是涉及到了很多构建工具、打包工具等等。而 rollup 就是其中一个优秀的打包工具，它支持 Tree-Shaking、ES6 模块化和代码分割等一系列即使在现代浏览器中都能让你的应用快速加载和执行的特性。另外，在工具的使用中我们总会有一些需求，比如构建完成后，想要在电脑上收到通知，告诉我们已经构建完成了，这就需要一个 rollup 插件来实现。今天，我们就来介绍一个 npm 包 rollup-plugin-notify，它可以实现构建完成后的自动通知，并提醒终端用户构建成功。
安装 rollup-plugin-notify
安装 rollup-plugin-notify 需要在 rollup 项目中使用。因此，需要先安装 rollup。我们可以使用以下命令安装 rollup：
npm install rollup -D
然后，就可以使用以下命令安装 rollup-plugin-notify：
npm install rollup-plugin-notify -D
配置 rollup-plugin-notify
在 rollup.config.js 文件中引入 rollup-plugin-notify：
-- -------------------- ---- -------
----- ------ - --------------------------------
-------------- - -
------ ---------------
------- -
----- -----------
------- ------
----- -----
--
-------- -
--------
-
--当然，你也可以通过传递一个对象参数来配置 notify，以实现更多的功能。
使用 rollup-plugin-notify
在项目开发过程中，我们在执行构建命令时，可以通过添加参数 --watch 实现文件监听。这里的 --watch，就是为了让 rollup 监听文件变化，实时进行构建。
我们可以在项目的 package.json 中配置以下命令：
{
"scripts": {
"build": "rollup -c",
"dev": "rollup -cw"
}
}运行 npm run dev 后，你就可以在终端中看到构建过程的日志，并在构建完成后收到一个通知，告诉你已经成功构建了。
示例代码
以下是一个简单的示例代码。
src/index.js:
console.log('Hello world!');rollup.config.js:
-- -------------------- ---- -------
----- ------ - --------------------------------
-------------- - -
------ ---------------
------- -
----- -----------
------- ------
----- -----
--
-------- -
--------
-
--运行 npm run dev 命令，即可在构建完成后收到一个通知，告诉你已经成功构建了。
注意：在安装 rollup-plugin-notify 时，如果遇到了权限问题，可以使用以下命令重新安装：
sudo npm install rollup-plugin-notify --unsafe-perm=true --allow-root -D
总结
通过本篇文章的介绍和示例代码，我们了解了如何通过 rollup-plugin-notify 插件实现构建完成后的自动通知，并提醒终端用户构建成功。同时，我们也通过 npm 实现了对 rollup 的安装和配置，这对新手来说也是一次不错的学习机会。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c02