我在每个项目中使用的 8 个顶级 npm 包

GenAI LIVE! | 2025年6月4日

Animejs是一个很棒的 JavaScript 动画库，我几乎用它来制作所有 CSS 动画无法快速完成的动画。这个库支持各种类型的动画，包括 CSS 动画和过渡、JavaScript 样式动画、SVG 变形动画等等。

此软件包也可与 npm 一起使用，并且可以像这样安装：

npm install animejs
#or
yarn add animejs

安装包后，您可以使用此导入将其导入到您的 JS 文件中，并按照文档了解如何制作精彩的动画。

import anime from "animejs";

Normalize.css只是一个 CSS 文件，将其包含在您的项目中以“重置”浏览器的 CSS，以便您的代码能够在尽可能多的浏览器和设备上更好地运行。

npm install normalize.css
#or
yarn add normalize.css

要将此包包含在您的项目中，您可以将其添加到您的主 CSS 或 SCSS/SASS 文件中。

// This @import will change depending on where your main CSS is located.
@import "../../../node_modules/normalize.css/normalize.css";

如果有人知道更好的方法来进入根目录，那么 node_modules 请在评论中告诉我。

如果你还没有开始使用Prettier，那么现在就应该开始。Prettier 会根据你的偏好设置代码格式，这样即使你输入了拼写错误，也无需事后再修改。

Prettier 可以通过多种不同的方式进行设置，例如在保存文件时格式化和在 git 提交时格式化，这正是 pretty-quick 和 Husky 可以做到的。

Pretty-quick就是 Prettier，但可以在提交更改时作为钩子运行。Husky是一个从文件运行代码钩子的包package.json。

npm install pretty-quick husky
#or
yarn add pretty-quick husky

然后将其添加到您的package.json文件中。

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
}

如果你选择了几行代码放入暂存区，然后提交这几行代码，Prettier 会报错。我发现，只要忽略它，再次提交就可以了。

浏览器同步对于网站开发非常有用，因为它可以让您查看网站的实时版本，并在代码发生更改时重新加载页面。它也非常适合在不同设备上测试您的网站。

npm install -g browser-sync
#or
yarn global add browser-sync

对于静态站点，您可以运行此命令的变体。

browser-sync start --server --files "css/*.css"

对于在本地服务器上运行的动态站点，您需要运行此命令的变体。要使此命令生效，您必须已经设置好 Vagrant 或 Docker 镜像之类的工具。

browser-sync start --proxy "yourproject.dev" --files "css/*.css"

Eslint会根据一组可修改的规则检查你的 JavaScript 文件，并告诉你代码是否有问题或缺失任何以后可能会出现的问题。这包括缺少分号和正确的空格等。

根据您的开发服务器，设置 Eslinter 的方法有很多种，但如果您希望将其添加到您的 Gridsome 项目中，请查看此处的文档。

Stylelint与 Eslint 类似，但适用于样式表。它可以检查元素间距是否正确，并且没有缺少分号。

目前没有办法将其添加到 Gridsome。