创建开发工具插件
了解如何创建开发工具插件以增强你的开发体验。
提示：查看 Expo DevTools 插件 了解完整示例。
¥Tip: Check out the Expo DevTools Plugins for complete examples.
你可以创建一个开发工具插件，无论是用于检查通用框架或库的各个方面，还是特定于你的自定义代码的内容。本指南将引导你创建开发工具插件。
¥You can create a dev tools plugin, whether that's for inspecting aspects of a common framework or library or something specific to your custom code. This guide will walk you through creating a dev tools plugin.
什么是开发工具插件？
¥What is a dev tools plugin?
开发工具插件在本地开发环境中的 Web 浏览器中运行，并连接到你的 Expo 应用。
¥A dev tools plugin runs in your web browser in your local development environment and connects to your Expo app.
插件由三个关键元素组成：
¥A plugin consists of three key elements:
-
用于显示开发工具 Web 用户界面的 Expo 应用。
¥An Expo app to display the dev tools web user interface.
-
用于 Expo CLI 识别的 expo-module.config.json。
¥An expo-module.config.json for Expo CLI recognition.
-
调用
expo/devtoolsAPI 以便应用与开发工具的 Web 界面来回通信。¥Calls to
expo/devtoolsAPI for the app to communicate back and forth with the dev tool's web interface.
插件可以在 npm 上分发或包含在应用的 monorepo 中。它们通常会导出一个钩子，该钩子可在应用的根组件中使用，以便在应用在调试模式下运行时启动与 Web 界面的双向通信。
¥Plugins can be distributed on npm or included inside your app's monorepo. They typically export a single hook that can be used in your app's root component to initiate two-way communication with the web interface when your app is running in debug mode.
1
Create a plugin
Create a new plugin project
create-dev-plugin will set up a new plugin project for you. Run the following command to create a new plugin project:
!!!IG6!!!
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 - this exports the hook that will be used inside the consuming app to connect it to the plugin.
- webui - this contains the web user interface for the plugin.
Customize a plugin's functionality
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.
The client object returned by useDevToolsPluginClient includes:
addMessageListener
Listens for a message matching the typed string and invokes the callback with the message data.
!!!IG0!!!
sendMessage
Listens for a message matching the typed string and invokes the callback with the message data.
!!!IG1!!!
Edit the Expo app inside the webui directory to customize the user interface that displays diagnostic information from your app or triggers test scenarios:
!!!IG2!!!
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:
!!!IG3!!!
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:
!!!IG4!!!
2
3