开始使用
欢迎来到 Grafana 插件创建的世界，在这里您可以增强 Grafana 的基础功能。在本指南中，您将学习如何通过搭建插件、在高效的开发环境中运行它以及使用其基本功能来开始。
观看我们的入门视频，了解如何开始您的第一个 Grafana 插件的步骤指南。这个视觉教程补充了下面的详细说明，并提供实际见解以帮助您顺利完成。
快速入门
使用单个命令搭建新的插件！运行以下命令并回答提示
- npm
- pnpm
- yarn
npx @grafana/create-plugin@latest
pnpm dlx @grafana/create-plugin@latest
yarn create @grafana/plugin
为什么创建 Grafana 插件?
Grafana 插件开发允许您创建许多不同类型的使用体验。例如，您可以
- 面板插件 - 新的数据可视化方式
- 数据源插件 - 连接到新的数据库或其他数据源
- 应用程序插件 - 集成即用体验
如果您是第一次创建插件，我们建议您熟悉插件类型、后端插件、数据帧和其他基本知识。我们推荐您熟悉 Grafana 插件开发的关键概念。
使用插件工具快速开发您的插件
Grafana的插件工具提供了一种官方支持的方式来扩展Grafana的核心功能。我们设计这些工具，帮助您通过现代的构建设置和无需额外配置，更快地开发您的插件。
插件工具包括两个包
create-plugin：一个CLI工具，用于搭建新的插件或迁移使用@grafana/toolkit创建的插件。sign-plugin：一个CLI工具，用于为分发签名插件。
如果您以前使用@grafana/toolkit构建了插件，您可以使用我们的插件工具来实现向最新工具的迁移。有关更多信息，请参阅从工具包迁移。
开始之前
请确保您正在使用受支持的操作系统、Grafana版本和工具。
支持的操作系统
Grafana插件工具支持以下操作系统
- Linux
- macOS
- Windows 10+与WSL（Windows子系统Linux）
支持的Grafana版本
我们通常建议您为v10.0之后的Grafana版本进行构建。有关使用Grafana进行开发时的要求和依赖项的更多信息，请参阅Grafana开发者指南。
推荐工具
您需要设置以下工具
支持的包管理器
当您第一次运行@grafana/create-plugin时，请选择您的包管理器：npm、pnpm或yarn。
搭建插件
运行create-plugin工具
运行以下命令并回答提示
- npm
- pnpm
- yarn
npx @grafana/create-plugin@latest
pnpm dlx @grafana/create-plugin@latest
yarn create @grafana/plugin
有关提示的帮助，请参阅CLI命令。
打开生成的文件夹结构
打开插件文件夹以浏览生成的插件
目录名 <orgName>-<pluginName>-<pluginType> 基于您对提示的答案。在提示时使用生成的文件夹名称。此目录包含启动您插件开发的初始项目结构。
文件结构应如下所示
<orgName>-<pluginName>-<pluginType>
├── .config/
├── .eslintrc
├── .github
│ └── workflows
├── .gitignore
├── .nvmrc
├── .prettierrc.js
├── CHANGELOG.md
├── LICENSE
├── Magefile.go
├── README.md
├── cypress
│ └── integration
├── docker-compose.yaml
├── go.mod
├── go.sum
├── jest-setup.js
├── jest.config.js
├── node_modules
├── package.json
├── pkg
│ ├── main.go
│ └── plugin
├── src
│ ├── README.md
│ ├── components
│ ├── datasource.ts
│ ├── img
│ ├── module.ts
│ ├── plugin.json
│ └── types.ts
└── tsconfig.json
有关这些文件的信息，请参阅插件的解剖结构。
在Docker中构建和运行您的插件
使用 create-plugin 工具，您可以使用Docker容器简化配置、加载和开发过程。有关更多信息，请参阅设置开发环境。
根据构建新插件后的“下一步”终端输出安装依赖项、构建和运行您的插件。
示例输出
## What's next?
Run the following commands to get started:
* cd ./orgName-pluginName-app
* npm install to install frontend dependencies.
* npm exec playwright install chromium to install e2e test dependencies.
* npm run dev to build (and watch) the plugin frontend code.
* mage -v build:backend to build the plugin backend code. Rerun this command every time you edit your backend files.
* docker compose up to start a grafana development server.
* Open https://127.0.0.1:3000 in your browser to create a dashboard to begin developing your plugin.
Note: We strongly recommend creating a new Git repository by running git init in ./org-pluginname-app before continuing.
* Learn more about Grafana Plugin Development at https://grafana.org.cn/developers/plugin-tools
安装依赖项
- npm
- pnpm
- yarn
cd <orgName>-<pluginName>-<pluginType>
npm install
cd <orgName>-<pluginName>-<pluginType>
pnpm install
cd <orgName>-<pluginName>-<pluginType>
yarn install
构建前端
为了以开发模式监视更改并构建插件，请运行
- npm
- pnpm
- yarn
npm run dev
pnpm run dev
yarn run dev
为了生产构建，请运行
- npm
- pnpm
- yarn
npm run build
pnpm run build
yarn run build
构建后端
如果您的插件包含后端组件，您可以使用mage进行构建
mage -v build:linux
构建目标
| 选项 | 描述 | 示例 |
|---|---|---|
build:[arch] | 为特定架构构建二进制文件。 | mage -v build:Linux |
列出所有可用的Mage目标以获取更多命令
mage -l
运行Grafana服务器
要使用Docker启动Grafana开发服务器，请运行
docker compose up --build
恭喜！您刚刚构建了您的第一个插件，现在您可以通过https://127.0.0.1:3000访问它。