在 VS Code 上配置 Grafana 的本地开发环境

标签：依赖 PnP yarn Grafana Code Yarn VS

为了在 VS Code 上顺利进行 Grafana 的本地开发，需要配置 Node.js 环境、安装 Yarn 和依赖、并确保开发工具能够正常工作。以下是配置和启动本地开发环境的详细步骤，包括使用 yarn dlx 命令来确保 VS Code 正确配置。

步骤 1：安装并使用正确版本的 Node.js

首先，确保你使用的是 Node.js 的正确版本。这里使用 nvm（Node Version Manager）来管理 Node.js 版本。

安装 NVM（如果尚未安装）：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
source ~/.nvm/nvm.sh

克隆项目

git clone https://github.com/grafana/grafana.git

安装和使用指定版本的 Node.js：
```
nvm install v16.16.0
nvm use v16.16.0
```

步骤 2：清理 Yarn 缓存并安装依赖

接下来，我们需要清理 Yarn 缓存并安装项目的依赖项。

清理 Yarn 缓存：
```
yarn cache clean
```
安装依赖并确保安装锁定：
```
yarn install --immutable
```
--immutable 选项确保依赖安装严格按照 yarn.lock 文件的内容进行。

步骤 3：启动项目

在依赖安装完成后，可以启动项目来确认一切正常。

启动项目：
```
yarn start
```

步骤 4：配置 VS Code 的开发环境

为了让 VS Code 能够正确识别并使用 Yarn Plug'n'Play (PnP) 的依赖管理方式，我们需要运行以下命令来生成相应的 SDK 文件。

生成 SDK 文件：

yarn dlx @yarnpkg/pnpify --sdk

或者

yarn dlx @yarnpkg/sdks

步骤 5：配置 VS Code 设置

确保 VS Code 正确配置以使用生成的 SDK 文件。

打开 VS Code 设置：
在 VS Code 中，按 Ctrl + ,（Windows/Linux）或 Cmd + ,（macOS）打开设置。
配置 settings.json：
点击右上角的“打开设置 (JSON)”图标，添加以下配置：
```
{
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "eslint.nodePath": ".yarn/sdks"
}
```
选择 TypeScript 版本：
打开 VS Code 命令面板（按 Ctrl + Shift + P），选择 TypeScript: Select TypeScript Version，然后选择 Use Workspace Version。

总结

通过以上步骤，你可以在 VS Code 上配置并启动 Grafana 的本地开发环境。此配置确保你使用正确版本的 Node.js，依赖严格按照锁定文件安装，并且 VS Code 能够正确识别和使用 PnP 的依赖管理方式。

完整命令列表

以下是完整的命令列表，按顺序执行即可配置和启动本地开发环境：

nvm install v16.16.0
nvm use v16.16.0
yarn cache clean
yarn install --immutable
yarn start
yarn dlx @yarnpkg/pnpify --sdk
# 或者
yarn dlx @yarnpkg/sdks

通过这些步骤，你将能够在 VS Code 上顺利进行 Grafana 的本地开发。如果遇到任何问题，请确保所有工具和依赖项都是最新版本，并参考相关文档或社区支持。

Yarn Plug'n'Play（PnP）是 Yarn 2（也称为 Yarn Berry）引入的一项重要功能，它改变了传统的 Node.js 项目依赖管理方式。本文将详细介绍 Yarn PnP 的概念、工作原理以及如何在项目中使用。

什么是 Yarn Plug'n'Play（PnP）？

Yarn Plug'n'Play（PnP）是 Yarn 2 引入的一种新的依赖解析和管理机制。传统的 Node.js 项目通常通过在 node_modules 目录下安装依赖来管理依赖项。而使用 PnP，Yarn 2 不再直接生成 node_modules 目录，而是将依赖项映射到一个虚拟文件系统中，从而避免了实际文件的复制和路径解析。

PnP 的优势

性能提升：
- 减少磁盘占用：不再需要大量复制依赖文件到 node_modules 目录。
- 快速启动：由于不需要等待 node_modules 的安装，项目启动时间更快。
- 内存效率：PnP 能够更有效地管理内存，特别是对于大型项目或有大量依赖的项目。
依赖版本控制：
- 精确锁定：依赖的版本由 Yarn.lock 文件中的精确版本锁定，确保每次安装都能获得相同的依赖版本。
易于迁移和维护：
- 一致性：PnP 提供了统一的依赖管理和版本控制机制，减少了项目在不同开发者之间的配置差异。

如何使用 Yarn Plug'n'Play（PnP）

要在项目中使用 PnP，首先需要安装 Yarn 2。接着，在项目的根目录下创建一个 .yarnrc.yml 文件，并添加以下内容以启用 PnP：

nodeLinker: pnp

然后，可以通过以下命令来进行项目的初始化和依赖安装：

yarn set version berry  # 安装 Yarn 2
yarn init -y            # 初始化项目
yarn install            # 安装依赖

常用操作和配置

生成 SDK 文件：

在某些情况下，特定工具（如 VS Code）需要了解项目中的依赖结构。可以使用以下命令生成 SDK 文件：
```
yarn dlx @yarnpkg/pnpify --sdk
```
这将在项目根目录下生成必要的 SDK 文件。
与 TypeScript 集成：

如果项目使用 TypeScript，可以在 VS Code 的设置中配置 TypeScript 的路径：
```
{
  "typescript.tsdk": ".yarn/sdks/typescript/lib"
}
```
添加依赖：

使用 Yarn 添加依赖项与传统方式相同，但无需手动更新 node_modules，Yarn 会自动更新依赖并更新 PnP 虚拟文件系统。
```
yarn add <package-name>
```
删除依赖：

同样，使用 Yarn 删除依赖项也是类似的方式：
```
yarn remove <package-name>
```

总结

Yarn Plug'n'Play（PnP）是 Yarn 2 中的一个重要功能，通过虚拟文件系统的方式管理和解析依赖项，极大地提升了项目的性能和管理效率。通过以上介绍，你现在应该对 PnP 的概念、优势以及如何在项目中使用有了更深入的理解。对于开发大型或需要快速启动的项目，特别是在多人协作环境中，PnP 是一个强大的工具，值得尝试和采用。

标签：依赖,PnP,yarn,Grafana,Code,Yarn,VS
From： https://www.cnblogs.com/sening/p/18256536