Netlify 构建插件公告 | CSS-Tricks

Netlify 刚刚发布了一项新功能：构建插件。（它目前处于 beta 测试阶段，因此您现在需要申请访问权限。）这是我对它的解释，主要参考了David Well 的公告视频.

您可能将 Netlify 视为一个服务，它可以轻松地从仓库中提取一些静态文件，并快速生成一个生产网站。您没有错。但让我们退一步看看。Netlify 将自己视为一个包含三个层级的平台

Netlify 构建
Netlify 开发
Netlify 边缘

Netlify 的大部分功能都归属于这些类别。连接您的 Git 仓库并让 Netlify 构建和部署网站？这就是构建。使用 Netlify 的 CLI 启动本地开发环境并进行诸如测试本地函数之类的操作？这就是开发。实际上运行我们的生产网站的增强型 CDN？这就是边缘。请参见产品页面以获取此细分。

因此，即使您只是在放置一些来自静态网站生成器的文件，您仍然可能利用了所有这些层级。构建负责 Git 连接，并可能运行 npm run build 或类似的命令。您可以在本地运行 netlify dev 来运行您的本地开发服务器。而实时网站则由边缘处理。

通过此新的构建插件发布，Netlify 正向构建的工作方式开放访问权限。它不再仅仅是“连接到仓库并在构建运行时运行此命令”。在构建过程中，实际上发生了一整套生命周期事件。David 这样描述了该生命周期

构建开始
获取缓存
安装依赖项
运行构建命令
构建无服务器函数
保存缓存
部署
后处理

如果您可以在这些生命周期事件中插入自己的代码并与它们一起运行，那该怎么办？这就是构建插件的整个理念。事实上，这些生命周期事件实际上是事件钩子。Sarah Drasner 在她的介绍性博客文章中列出了它们及其官方名称

init：构建开始时
getCache：获取上次构建的缓存
install：当项目依赖项正在安装时
preBuild：在构建函数和运行构建命令之前直接运行
functionsBuild：在构建无服务器函数时运行（如果网站上存在函数）
build：当构建命令正在执行时
package：打包以供部署
preDeploy：在部署构建的软件包之前运行
saveCache：保存缓存的资产
finally：构建完成，网站已部署 🚀

要使用这些钩子并在构建过程中运行您自己的代码，您需要编写一个插件（使用 Node JavaScript）并将其放到类似 ./plugins/myPlugin/index.js 的插件文件夹中

function netlifyPlugin(config) {
  return {
    name: 'my-plugin-name',
    init: () => {
      console.log('Hi from init')
    },
  }
}

module.exports = netlifyPlugin

…并调整您的 Netlify 配置（文件）以指向它。您最好阅读 Sarah 的文章以获取完整的信息和示例。

我完成了第一个@Netlify 构建插件。现在我需要我的预 beta 访问权限来运行测试。

KISS #jamstackconf pic.twitter.com/VIAnal1SpD

— Tony Alves (@3_Alves) 2019 年 10 月 17 日

好的。有什么用？

这是关键部分，对吧？这几乎是唯一重要的事情。拥有控制权很好，但只有在它真正有用时才重要。因此，既然我们可以插入平台本身构建过程的各个部分，我们能使它做什么来改善我们的生活和网站？

到目前为止，我收集到了一些想法。

David 演示了构建过程如何构建网站地图。网站地图非常棒（对于 SEO 来说），但我绝对不需要经常浪费时间在本地构建它们，而且它们也不需要在我的仓库中。让平台来完成它，并将该文件作为“构建工件”发布。您可以在所有内容上执行此操作（例如，我的本地构建过程需要编译 CSS 等，因此我可以在本地进行实际工作），但如果生产需要本地没有的文件，它就很适合。

通知

Sarah 演示了一个插件，该插件会调用Twilio API 来发送文本消息以通知构建完成。我会做同样的事情，让Buddy 在此网站部署完成时发送Slack 消息。您可以想象，像这样以编程方式发送消息如何促进团队协作。

性能监控

构建时间是获取性能指标的绝佳时机。Netlify 表示他们正在开发一个插件来跟踪您在部署之间的Lighthouse 分数。为什么不在那里运行您的SpeedCurve CLI 工具或Build Tracker CLI 以查看您是否破坏了性能预算？

性能专家@tkadlec 为@SpeedCurve 写了一个 Netlify 构建插件！
在这篇文章中，他分析了如何使用我们新的私有 beta 功能为您的网站创建一些性能测试。很棒的文章！ https://#/aYU9NmosQQ pic.twitter.com/FnX6KgeLRG

— Netlify (@Netlify) 2019 年 10 月 22 日

优化

为什么不在构建时运行所有图像优化？Image Optim 有一个 API 可以调用。SVGO 可以在命令行上运行，Netlify 表示他们正在开发该插件。我认为您可能希望在本地构建过程中运行其中一些操作（例如，将图像放到文件夹中，Gulp 正在监视，图像被优化），但请记住，您可以在本地运行 netlify dev，它将在本地运行您的构建步骤，您也可以组织您的 Gulp，以便进行图像优化的代码可以构建监视过程的一部分或在构建过程中明确调用。

图像是在优化方面非常棒的目标，但几乎所有资源都可以以某种方式进行优化！

我构建了一个@Netlify 构建插件，在您的网站上运行 subfont。看来我还没有访问构建插件的权限，因此，如果有人愿意尝试并给我一些反馈，我将不胜感激。https://#/PrnL65JSwb

— Peter Müller (@_munter_) 2019 年 10 月 18 日

放弃有问题的构建

如果您的构建过程失败，Netlify 已经不会部署它。这很明显有用。但现在您可以自己触发该失败。如果性能监控不仅报告正在发生的事情，而且如果未达到预算就真正终止构建，该怎么办？您只需要做抛出错误或 process.exit，我听说。

更棒的是，如果出现可访问性回归，如何终止构建？Netlify 正在开发用于审核的Axe 插件。

显然，如果您的单元测试（例如Jest）失败，或者您的端到端测试（例如Cypress）失败，您可以终止构建，这意味着您可以监视 404 和各种用户界面问题，并防止出现有问题的部署。

使用该构建

Netlify 显然是全心全意地投入到 JAMstack 概念中。其中一些很明显。将一些静态文件放在一个强大的 CDN 上，网站就拥有了一个非常快的基础。另一些则不那么明显。如果你仍然需要服务器支持的代码，你仍然可以通过云函数的形式获得它，而云函数可能比大多数人意识到的还要强大。还有一些需要你以一种新的方式思考你的网站，比如预先构建标记不是一个非此即彼的选择。你可以尽可能地构建，并将客户端工作留给更适合客户端执行的任务（例如个性化信息）。如果你开始将你的构建过程视为一个强大的灵活工具，可以尽可能地将工作卸载到它身上，那就从这里开始。