入门
欢迎来到 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：用于搭建新的插件或迁移使用@grafana/toolkit创建的插件的 CLI。sign-plugin：用于签署用于分发的插件的 CLI。
如果你之前使用 @grafana/toolkit 构建过插件，可以使用我们的插件工具迁移到最新工具。有关更多信息，请参阅 从 toolkit 迁移。
开始之前
确保你使用的是受支持的操作系统、Grafana 版本和工具。
支持的操作系统
Grafana 插件工具与以下操作系统兼容：
- Linux
- macOS
- Windows 10+（使用 WSL（适用于 Linux 的 Windows 子系统））
支持的 Grafana 版本
我们通常建议你构建 v9.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 访问它。