创建一个开发者工具插件

编辑页面

了解如何创建一个开发者工具插件，以增强您的开发体验。

提示：查看 Expo DevTools Plugins 获取完整示例。

你可以创建一个开发工具插件，无论是用于检查常见框架或库的某些方面，还是用于你自定义代码中的特定内容。本指南将引导你完成创建开发工具插件的过程。

什么是开发工具插件？

开发工具插件会在本地开发环境中的网页浏览器里运行，并连接到你的 Expo 应用。

一个插件由三个关键元素组成：

一个 Expo 应用，用于显示开发工具的 Web 用户界面。
一个 expo-module.config.json，供 Expo CLI 识别。
对 expo/devtools API 的调用，用于让应用与开发工具的 Web 界面双向通信。

插件可以通过 npm 分发，也可以包含在你的应用 monorepo 中。它们通常会导出一个单独的 hook，你可以在应用的根组件中使用它，在应用以调试模式运行时与 Web 界面建立双向通信。

创建插件

创建一个新的插件项目

create-dev-plugin 会为你搭建一个新的插件项目。运行以下命令来创建一个新的插件项目：

Terminal

- npx create-dev-plugin@latest

create-dev-plugin 会提示你输入插件名称、描述，以及供插件使用者调用的 hook 名称。

插件项目将包含以下目录：

src - 这里导出会在消费应用中使用的 hook，用于将其连接到插件。
webui - 这里包含该插件的 Web 用户界面。

自定义插件功能

该模板包含一个在插件和应用之间发送与接收消息的简单示例。useDevToolsPluginClient 从 expo/devtools 导入，提供在插件和应用之间发送与接收消息的功能。

useDevToolsPluginClient 返回的客户端对象包含：

`addMessageListener`

监听与指定字符串匹配的消息，并使用消息数据调用回调函数。

const client = useDevToolsPluginClient('my-devtools-plugin');
client.addMessageListener('ping', data => {
  alert(`Received ping from ${data.from}`);
});

`sendMessage`

监听与指定字符串匹配的消息，并使用消息数据调用回调函数。

const client = useDevToolsPluginClient('my-devtools-plugin');
client?.sendMessage('ping', { from: 'web' });

编辑 webui 目录中的 Expo 应用，以自定义显示来自你应用的诊断信息或触发测试场景的用户界面：

webui/App.tsx

import { useDevToolsPluginClient, type EventSubscription } from 'expo/devtools';
import { useEffect } from 'react';

export default function App() {
  const client = useDevToolsPluginClient('my-devtools-plugin');

  useEffect(() => {
    const subscriptions: EventSubscription[] = [];

    subscriptions.push(
      client?.addMessageListener('ping', data => {
        alert(`Received ping from ${data.from}`);
      })
    );

    return () => {
      for (const subscription of subscriptions) {
        subscription?.remove();
      }
    };
  }, [client]);
}

编辑 src 目录中的 hook，以自定义发送给插件的诊断信息，或应用应如何响应来自 Web 用户界面的任何消息：

src/useMyDevToolsPlugin.ts

import { useDevToolsPluginClient } from 'expo/devtools';

export function useMyDevToolsPlugin() {
  const client = useDevToolsPluginClient('my-devtools-plugin');

  const sendPing = () => {
    client?.sendMessage('ping', { from: 'app' });
  };

  return {
    sendPing,
  };
}

如果你更新 hook 让它返回会被应用调用的函数，你还需要更新 src/index.ts，以便在应用未以调试模式运行时导出空操作函数：

src/index.ts

if (process.env.NODE_ENV !== 'production') {
  useMyDevToolsPlugin = require('./useMyDevToolsPlugin').useMyDevToolsPlugin;
} else {
  useMyDevToolsPlugin = () => ({
+    sendPing: () => {},
  });
}

测试插件

由于插件的 Web UI 是一个 Expo 应用，你可以像测试其他 Expo 应用一样使用 npx expo start 来测试它，只不过你将仅在浏览器中运行它。模板包含一个便捷命令，可在本地开发模式下运行该插件：

Terminal

- npm run web:dev

构建用于分发的插件

要为插件的分发或在 monorepo 中使用做准备，你需要使用以下命令构建插件：

Terminal

- npm run build:all

该命令会将 hook 代码构建到 build 目录中，并将 Web 用户界面构建到 dist 目录中。

使用插件

将插件的 hook 导入到你应用的根组件中并调用它，以将应用连接到插件：

App.js

import { useMyDevToolsPlugin } from 'my-devtools-plugin';
import { Button } from 'react-native';

export default function App() {
  const { sendPing } = useMyDevToolsPlugin();

  return (
    <View style={styles.container}>
      <Button
        title="Ping"
        onPress={() => {
          sendPing();
        }}
      />
    </View>
  );
}