# @apideck/wayfinder 中文文档

规范地址：https://npmcn.com/package/%40apideck/wayfinder/

版本：0\.2\.6
npm 元数据更新时间：2026-09-17T09:13:40.414Z
中文译文更新时间：2026-11-06T10:01:31.835Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40apideck/wayfinder
原文对照：https://npmcn.com/package/%40apideck/wayfinder/?lang=original
项目主页：https://github.com/apideck-io/wayfinder#readme
源码仓库：https://github.com/apideck-io/wayfinder

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：685 kB，19 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：react ^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0，react-dom ^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0
- 首次发布：2023-10-24T13:01:37.680Z
- 最新版本发布：2026-06-02T06:46:21.634Z
- 近 30 天下载量：14608（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 1 个）

## 中文简介

WayFinder是一个基于TypeScript的应用程序,帮助您浏览您的JSON数据. 它提供了一个方便用户的界面,用于导航/查询你的JSON数据并构建JSONPath表达式.

## 安装

```sh
npm install @apideck/wayfinder
```

也可以使用：`pnpm add @apideck/wayfinder`、`yarn add @apideck/wayfinder`、`bun add @apideck/wayfinder`

## README

# 温德

WayFinder是一个基于TypeScript的应用程序,帮助您浏览您的JSON数据. 它提供了一个方便用户的界面,用于导航/查询你的JSON数据并构建JSONPath表达式.

## 使用 WayFinder 软件

1.  把你的渴望的JSON放入左手边.
2.  要构建 JSONPath,只需点击 JSON 数据内的任何密钥即可. 这将自动添加到 JSONPath 中.
3.  如果您打算瞄准数组中的某个项目,请选择项目属性中的一个值来插入过滤表达式.
4.  为了验证您的 JSONPath 的正确性, 请按“ 测试” 按钮 。 有效的JSONPaths将会在正确的面板上展示他们的成果.

也可以直接在 JSONPath 中手动调整或添加过滤表达式.

![WayFinder Application](https://github.com/apideck-io/wayfinder/raw/main/screenshot.png)

## 开始

1.  安装软件包 :

```bash
yarn add @apideck/wayfinder
```

2.  更新您的尾风. config.js文件,并在内容阵列中添加以下路径 :

```js
// tailwind.config.js

module.exports = {
  content: [
    // ...
    './node_modules/@apideck/wayfinder/**/*.js'
  ]
  // ...
}
```

3.  导入 WayFinder 组件并在您的应用程序中使用 :

```tsx
import { Button, useModal } from '@apideck/components'
import { WayFinder } from '@apideck/wayfinder'

const exampleResponse = JSON.stringify(
  {
    id: 'file',
    value: 'File',
    popup: {
      menuitem: [
        { id: 1, name: 'New' },
        { id: 2, name: 'Open' },
        { id: 3, name: 'Close' }
      ]
    }
  },
  null,
  2
)

const modalOptions = {
  className: '!max-w-5xl !p-0',
  onClose: () => console.log('Closing modal..')
}

const MyComponent = () => {
  const { addModal, removeModal } = useModal()

  return (
    <Button
      text="Open WayFinder"
      onClick={() => {
        addModal(
          <WayFinder
            onSelect={(jsonPath) => {
              console.log(jsonPath)
              removeModal()
            }}
            onClose={removeModal}
            defaultInput={exampleResponse}
          />,
          modalOptions
        )
      }}
    />
  )
}

export default MyComponent
```

## 本地运行

要在本地运行 WayFinder 应用程序, 您需要安装在您的机器上 。 如有这些先决条件,请遵循以下步骤:

1.  把仓库切入本地机器.
    
2.  导航到项目目录并通过运行安装依赖性 :
    

```bash
yarn install
```

## 故事书

该项目包括用于孤立地开发和测试UI组件的"故事书". 要运行故事本,请使用以下命令:

```bash
yarn storybook
```

这将启动本地服务器上的故事本, 通常 `http://localhost:6006` 并打开带有 Storybook UI 的浏览器窗口。 然后可以导航到您想要测试的组件,并与它隔离地互动.

## 项目建设

建设生产项目,使用下列指令: 1

```bash
yarn build
```

这将创建一个 `dist` 项目根目录中的已编译资产已准备部署.

## 线性

该项目使用ESLint来进行倒接. 要运行插件,请使用以下命令:

```bash
yarn lint
```

这将运行工程上的ESLint,并报告任何林入出错.

记住在为项目作出贡献时始终遵循代码库提供的最佳做法和准则.

## 常见问题

### @apideck/wayfinder 是什么？

WayFinder是一个基于TypeScript的应用程序,帮助您浏览您的JSON数据\. 它提供了一个方便用户的界面,用于导航/查询你的JSON数据并构建JSONPath表达式\.

### 如何安装 @apideck/wayfinder？

在项目目录运行 npm install @apideck/wayfinder，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0）、react-dom（^16\.8\.0 \|\| ^17\.0\.0 \|\| ^18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @apideck/wayfinder 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @apideck/wayfinder 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @apideck/wayfinder 可以商用吗？

@apideck/wayfinder 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @apideck/wayfinder 的下载量有多少？

根据 npm 官方下载统计，@apideck/wayfinder 在 2026/10/06 – 2026/11/04 这 30 天内被下载 14,608 次，日均约 487 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @apideck/wayfinder 还在维护吗？

最新版本 0\.2\.6 发布于 2026/06/02（5 个月前）；至今共发布 19 个版本，其中过去 12 个月发布了 1 个；首次发布于 2023/10/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。