您需要了解有关Netlify构建插件的知识

2020年12月30日11:17:57 发表评论 35 次浏览

本文概述

一段时间以来, 托管基础架构和部署站点是我们的唯一选择。你部署了网站, 购买了URL, 并进行了订购以保持其活动状态。如今, Netlify已通过一系列功能(包括跨框架支持, 分析和无服务器功能)成功地改善了这一点。一项特殊功能最近推出了, 事实证明它将改变游戏规则。

在本文中, 我们将学习什么是Netlify构建插件, 它们的作用以及如何创建一个。本教程假定你具有Netlify及其功能的基本知识-如果你不熟悉Netlify, 则可以检查本综合指南出来。

什么是Netlify构建插件?

构建插件使你可以自动化可以连接到项目构建过程的任务。对于项目的每次部署, 这些任务都是异步执行的。你可以在每次部署项目时使用构建插件执行各种操作, 例如, 每次站点部署时进行加密货币捐赠或向团队其他成员发送通知-可能性无穷无尽。

开发人员创建了许多已发布的插件, 你可以将其添加到项目中, 并在每次部署时执行出色的工作。要将插件添加到项目中, 请在Netlify仪表板上, 导航至网站然后选择要将插件添加到的项目:

添加netlify插件

接下来, 点击外挂程式标签并浏览插件目录, 然后选择你想要在项目中安装的插件:

选择插件

构建自己的插件

每个Netlify构建插件都有一个"骨架"结构, 该结构由三个文件组成:

  • index.js—插件的入口点。在这里, 你可以使用Netlify的任何Hook嵌入用于定义插件动作的逻辑, 例如onPrebuild, onPostbuild, 要么结束
  • manifest.yml—此文件处理交互式数据。可能是要进行部署时需要的一组用户输入或信息
  • package.json—该文件处理非交互式数据, 其中包含插件名称, 作者和依赖项之类的内容

然后还有一个附加文件, netlify.toml, 它将在你的项目中包含插件时指定其路径。请注意, 仅当你的插件尚未发布到NPM时, 此文件才有用。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

您需要了解有关Netlify构建插件的知识1

我们将要处理这四个文件, 但首先, 我们需要在项目文件夹中全局安装Netlify。对于我的项目, 我将部署电子商务商店演示用React Hooks构建。使用我们的终端, 导航到我们的项目文件夹并安装Netlify:

# Navigate to your project
cd react-hooks-app

# Install Netlify CLI globally
npm install netlify-cli -g

### OR use Yarn ### 
yarn global add netlify-cli

接下来, 在我们的项目中, 我们将为插件创建一个文件夹。在你的项目文件夹中, 创建一个文件夹, 其中将存储插件的内容。 Netlify插件遵循一种命名约定, 其中, 插件根据其作用进行命名。我们正在构建一个插件, 每次部署我们的应用时, 该插件都会向队友或老板发送电子邮件, 因此我们将其称为netlify-emailplugin:

+ react-hooks-app
   + .netlify
   + build
   + node_modules
   + public
     - index.html
   + src
   + netlify-emailplugin
     - index.js
     - manifest.yml
     - package.json

package.json

我们先来处理package.json文件, 我们将在其中定义插件并安装所需的所有必需依赖项。在你的终端中, 导航到插件的文件夹并运行npm初始化–这将显示几个问题, 你需要填写有关插件的信息:

{
  "name": "netlify-emailplugin", "version": "1.0.0", "description": "A Netlify plugin that emails my boss each time I make an update", "main": "index.js", "devDependencies": {}, "scripts": {
    "test": "echo \\\"Error: no test specified\\\" && exit 1"
  }, "repository": {
    "type": "git", "url": "git+https://github.com/fullstackmafia/netlify-emailplugin.git"
  }, "keywords": [
    "netlify", "netlify-plugin", "build", "plugins"
  ], "author": "Raphael Ugwu <ugwuraphael@gmail.com>", "license": "MIT", "bugs": {
    "url": "https://github.com/fullstackmafia/netlify-emailplugin/issues"
  }, "homepage": "https://github.com/fullstackmafia/netlify-emailplugin#readme"
}

这很重要网络化和netlify插件作为关键字, 以增加你的插件在每次查找时被发现的机会。对于我们的插件, 我们需要包含一个依赖项, 该依赖项会在每次部署后触发电子邮件通知。为此, 我们将使用邮戳–很棒的电子邮件API。首先, 让我们注册Postmark并获取一组API密钥:

邮戳服务器api令牌

接下来, 我们将Postmark安装为插件文件夹的依赖项:

# Navigate to your plugin's folder
cd netlify-emailplugin

# Install Postmark
npm install postmark

### OR use Yarn ###
yarn add postmark

完成此操作后, 你就可以成功设置package.json文件。

netlify.toml

接下来, 在我们项目的根文件夹中, 我们需要创建netlify.toml文件, 我们将在其中指定插件的路径:

[[plugins]]
package = "./netlify-emailplugin"

由于我们使用的是本地插件, 因此我们需要包含Netlify的本地核心安装程序插件, 该插件将有助于启用在我们的系统中安装的所有依赖项package.json文件:

[[plugins]]
 package = "@netlify/plugin-local-install-core"

 [[plugins]]
 package = "./netlify-emailplugin"

manifest.yml

我们的manifest.yml文件应包含有关我们插件的基本信息。由于这是电子邮件插件, 因此我们将包括插件名称, 发件人的电子邮件(我的电子邮件)和收件人的电子邮件(我的老板的电子邮件):

name: netlify-emailplugin
inputs:
  - name: from
    description: Sender email
    default: raphael@flutterwavego.com
  - name: to
    description: Receiver email
    default: peter@flutterwavego.com

在我们建立我们的index.js文件, 让我们花点时间来了解Netlify的构建事件。借助构建事件, 你可以访问应用构建过程的不同阶段-借助它们, 你可以决定要在何处触发插件。 Netlify总共有七个构建过程:

  • onInit-在其他任何东西之前运行
  • onPreBuild—在执行构建命令之前运行
  • onBuild—在执行构建命令时运行
  • onPostBuild—在执行构建命令后运行
  • 成功-构建成功完成后运行
  • onError—如果有构建错误, 则运行
  • 结束—在构建过程结束时运行于构建错误或成功

对于我们的插件, 我们将使用结束构建事件–因此, 每次我们成功运行构建时, 都会发送一封电子邮件。

index.js

创建我们的第一步index.js文件将包含之前安装的所有依赖项package.json:

var postmark = require("postmark");

接下来, 我们需要包括将与我们的插件进行交互的常量。在这种情况下, 我们的常数是发件人的电子邮件, 收件人的电子邮件和邮戳的API密钥。为了使使用此插件的每个用户都可以访问, 保持唯一性和安全性, Netlify允许我们将这些常量保存在构建和部署我们项目的一部分:

现在我们可以在文件中包含这些常量:

const {
    FROM_EMAIL, KEY, TO_EMAIL, } = process.env

按照最佳做法, 我们应该在插件中包含某种形式的错误处理。为此, 每次插件缺失常量时, 我​​们都会抛出一个错误:

if (!FROM_EMAIL) {
  throw new Error('No sender email present')
}
if (!TO_EMAIL) {
  throw new Error('No recipient email present')
}
if (!KEY) {
  throw new Error('No KEY present')
}

最后, 我们将启动一个发送电子邮件的Postmark实例。我们还将为插件提供访问我们输入中的用户输入的选项manifest.yml文件:

const client = new postmark.ServerClient(KEY);
const message = 'Hello Boss, we just deployed some bug fixes'
await client.sendEmail({
  From: inputs.from || FROM_EMAIL, To: inputs.to || TO_EMAIL, Subject: "New Deploy", TextBody: message

那里!我们已经完成了编译index.js文件, 剩下的就是将我们所有的代码包装在一个module.exports功能, 以便我们项目的其余部分可以访问:

module.exports = {
    onEnd: async ({ inputs }) => {
        if (!FROM_EMAIL) {
            throw new Error('No sender email present')
          }
          if (!TO_EMAIL) {
            throw new Error('No recipient email present')
          }
          if (!KEY) {
            throw new Error('No KEY present')
          }
          const client = new postmark.ServerClient(KEY);
          const message = 'Hello Boss, we just deployed some bug fixes'
          await client.sendEmail({
            From: inputs.from || FROM_EMAIL, To: inputs.to || TO_EMAIL, Subject: "New Deploy", TextBody: message
          })
    }, }

现在我们准备使用我们的插件。使用Git推送更新你的最新更改, 然后在Netlify上部署你的项目。你应该收到一个摘要, 说明你的构建进行得很好, 并且使用了你的插件:

建立顺利

你的老板应该会收到你的电子邮件:

部署了一封电子邮件,内容为“您好老板,我们刚刚部署了一些错误修复程序”

总结

构建插件将释放出很多交叉合作的机会。他们已经存在很长时间了, 但是已经成为主流。你可以在此查看更多其他开发人员制作的很棒的构建插件示例回购。如果你想查看此插件的源代码, 可以这样做这里.

日志火箭:全面了解你的网络应用

LogRocket仪表板免费试用横幅

日志火箭是一个前端应用程序监视解决方案, 可让你重播问题, 就好像问题发生在你自己的浏览器中一样。 notlogy无需猜测错误发生的原因, 也不要求用户提供屏幕截图和日志转储, 而是让你重播会话以快速了解出了什么问题。无论框架如何, 它都能与任何应用完美配合, 并具有用于记录来自Redux, Vuex和@ ngrx / store的其他上下文的插件。

除了记录Redux动作和状态外, notlogy还会记录控制台日志, JavaScript错误, 堆栈跟踪, 带有标题+正文, 浏览器元数据和自定义日志的网络请求/响应。它还使用DOM来记录页面上的HTML和CSS, 甚至可以为最复杂的单页面应用程序重新创建像素完美的视频。

免费试用

.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: