创建开发工具插件

创建一个插件

¥Create a plugin

创建一个新的插件项目

¥Create a new plugin project

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

¥create-dev-plugin will set up a new plugin project for you. Run the following command to create a new plugin project:

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

¥create-dev-plugin will prompt you for the name of your plugin, a description, and the name of the hook that will be used by consumers of your plugin.

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

¥The plugin project will contain the following directories:

• src - 这会导出将在消费应用内部使用的钩子，以将其连接到插件。

  ¥src - this exports the hook that will be used inside the consuming app to connect it to the plugin.

• webui - 这包含插件的网络用户界面。

  ¥webui - this contains the web user interface for the plugin.

自定义插件的功能

¥Customize a plugin's functionality

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

¥The template includes a simple example of sending and receiving messages between the plugin and the app. useDevToolsPluginClient, imported from expo/devtools, provides functionality for sending and receiving messages between the plugin and the app.

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

¥The client object returned by useDevToolsPluginClient includes:

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

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

编辑 webui 文件夹内的 Expo 应用以自定义显示应用诊断信息或触发测试场景的用户界面：

¥Edit the Expo app inside the webui folder to customize the user interface that displays diagnostic information from your app or triggers test scenarios:

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 目录中的钩子以自定义发送到插件的诊断信息或应用应如何响应来自 Web 用户界面的任何消息：

¥Edit the hook in the src directory to customize what diagnostic information is sent to the plugin or how the app should respond to any messages from the web user interface:

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，以便当应用未在调试模式下运行时导出无操作函数：

¥If you update the hook to return functions that will be called by the app, you will also need to update src/index.ts so it exports no-op functions when the app is not running in debug mode:

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

测试一个插件

¥Test a plugin

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

¥Since the plugin web UI is an Expo app, you can test it just like you would any other Expo app, with npx expo start, except that you will run it in the browser only. The template includes a convenience command to run the plugin in local development mode:

构建一个用于分发的插件

¥Build a plugin for distribution

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

¥To prepare your plugin for distribution or use within your monorepo, you will need to build the plugin with the following command:

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

¥This command will build the hook code into the build directory, and the web user interface into the dist directory.

使用插件

¥Use the plugin

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

¥Import the plugin's hook into your app's root component and call it to connect your app to the plugin:

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