创建开发工具插件

编辑

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

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

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

什么是开发工具插件？

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

一个插件包含三个关键元素：

一个 Expo 应用，用于显示开发工具网页用户界面。
一个 expo-module.config.json 以供 Expo CLI 识别。
调用 expo/devtools API 以便应用能与开发工具的网页界面进行双向通信。

插件可以在 npm 上分发或包含在您应用的单一代码库中。它们通常导出一个可以在您应用的根组件中使用的钩子，以便在应用以调试模式运行时与网页界面进行双向通信。

创建插件

创建一个新的插件项目

create-dev-plugin 将为您设置一个新的插件项目。运行以下命令以创建新的插件项目：

Terminal

- npx create-dev-plugin@latest

create-dev-plugin 将提示您输入插件的名称、描述以及将被插件使用者使用的钩子的名称。

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

src - 这是导出将被消费应用用于连接插件的钩子。
webui - 这包含插件的网页用户界面。

自定义插件的功能

模板包含一个简单的示例，演示了插件与应用之间发送和接收消息。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 目录中的钩子，以自定义发送到插件的诊断信息或应用如何应对来自网页用户界面的任何消息：

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,
  };
}

如果您更新钩子以返回将在应用中调用的函数，您还需要更新 src/index.ts 以便在应用未在调试模式下运行时，它将导出无操作函数：

src/index.ts

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

测试插件

由于插件网页用户界面是一个 Expo 应用，您可以像测试任何其他 Expo 应用一样进行测试，使用 npx expo start，不同的是您将仅在浏览器中运行它。模板包含了一个便利命令，以在本地开发模式下运行插件：

Terminal

- npm run web:dev

构建插件以供分发

为了准备您的插件以供分发或在您的单一代码库中使用，您需要使用以下命令构建插件：

Terminal

- npm run build:all

此命令将在 build 目录中构建钩子代码，并在 dist 目录中构建网页用户界面。

使用插件

将插件的钩子导入到您应用的根组件中，并调用它以连接您的应用与插件：

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>
  );
}