开始使用
欢迎来到 Grafana 插件创建的世界，在这里您可以增强 Grafana 的基础功能。本指南将教您如何通过搭建插件框架、在高效的开发环境中运行插件以及使用其基本功能来开始使用。
观看我们的介绍视频，了解开始创建您的第一个 Grafana 插件的分步指南。本视频教程是对下方详细说明的补充，并提供实用的见解，助您一臂之力。
快速开始
使用一个命令即可搭建新的插件框架！运行以下命令并回答提示问题
- npm
- Yarn
- pnpm
npx @grafana/create-plugin@latest
yarn dlx @grafana/create-plugin@latest
pnpm dlx @grafana/create-plugin@latest
为什么要创建 Grafana 插件？
Grafana 插件开发允许您创建多种不同的用户体验。例如，您可以创建
- 面板插件 - 数据可视化新方式
- 数据源插件 - 连接新的数据库或其他数据源
- 应用插件 - 集成式开箱即用体验
如果这是您第一次创建插件，建议您先熟悉插件类型、后端插件、数据帧等基础知识。了解更多关于Grafana 插件开发的关键概念。
Grafana 插件分类
建议您熟悉 Grafana 插件的标志性分类，例如私有插件和公共插件的区别。请注意，如果您想将与商业产品相关的插件发布到 Grafana 官方目录，通常需要付费订阅。了解更多关于我们的插件政策。
使用插件工具更快地开发您的插件
Grafana 的插件工具提供了一种官方支持的方式来扩展 Grafana 的核心功能。我们设计这些工具是为了帮助您使用现代构建设置更快地开发插件，无需额外配置。
插件工具包含两个包
create-plugin：一个 CLI 工具，用于搭建新插件或迁移使用@grafana/toolkit创建的插件。sign-plugin：一个用于签名插件以便分发的 CLI 工具。
如果您之前使用 @grafana/toolkit 构建过插件，您可以使用我们的插件工具迁移到我们最新的工具。有关更多信息，请参阅从 toolkit 迁移。
开始之前
确保您正在使用支持的操作系统、Grafana 版本和工具。
支持的操作系统
Grafana 插件工具支持以下操作系统
- Linux
- macOS
- Windows 10+ 并带有 WSL (Windows 子系统 for Linux)
支持的 Grafana 版本
我们通常建议您针对 v10.0 或更高版本的 Grafana 进行构建。有关使用 Grafana 进行开发时的要求和依赖项的更多信息，请参阅Grafana 开发者指南。
推荐工具
您需要设置以下工具
支持的包管理器
当您首次运行 @grafana/create-plugin 时，选择您的包管理器：npm、pnpm 或 yarn。
::: note 本网站上的 Yarn 命令与 Yarn Berry (>=2.0.0) 兼容。如果您使用的是 Yarn 1.x.x，建议您升级到 Yarn Berry。或者，您可以使用 yarn create @grafana/plugin 来运行 Yarn 1.x.x 的命令。::
搭建插件框架
运行 create-plugin 工具
运行以下命令并回答提示问题
- npm
- Yarn
- pnpm
npx @grafana/create-plugin@latest
yarn dlx @grafana/create-plugin@latest
pnpm dlx @grafana/create-plugin@latest
有关提示问题的帮助，请参阅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://: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
- Yarn
- pnpm
cd <orgName>-<pluginName>-<pluginType>
npm install
cd <orgName>-<pluginName>-<pluginType>
yarn install
cd <orgName>-<pluginName>-<pluginType>
pnpm install
构建前端
要在开发模式下构建插件并进行监视，持续监听更改，请运行
- npm
- Yarn
- pnpm
npm run dev
yarn dev
pnpm run dev
要进行生产构建，请运行
- npm
- Yarn
- pnpm
npm run build
yarn build
pnpm run build
构建后端
如果您的插件包含后端组件，您可以使用 mage 进行构建
mage -v build:linux
构建目标
| 选项 | 描述 | 示例 |
|---|---|---|
build:[arch] | 为特定架构构建二进制文件。 | mage -v build:Linux |
列出所有可用的 Mage 目标以获取额外命令
mage -l
运行 Grafana 服务器
要使用 Docker 启动 Grafana 开发服务器，请运行
docker compose up --build
恭喜！您刚刚搭建了第一个插件框架，现在可以通过https://:3000 访问它。