使用 Typescript 时在 Wordpress 中导入 React 的最佳方式？

Question

我可以在捆绑的 javascript 中引用 WordPress 排队的 React / React-Dom 脚本，但使用 -dev 安装的 React 进行开发吗？

JavaScript 文件适用于 Wordpress 插件。它们是用 Typescript 开发的 React 组件。这不是一个应用程序，而是根据客户端正在查看的页面/路线排队的多个单独的 Javascript 文件。 Webpack 和 Typescript 配置已正确设置，因此我当前的设置有效。我正在询问有关优化当前流程的更多信息。

目前，当需要任何 React 功能时，我在 .tsx 文件的第一行使用以下位：

declare const wp: any;
const { useEffect, useState } = wp.element;

但我发现这不是最优的。这样我就无法使用任何 Typescript React 类型，而且安装其他 npm 包也会让人头疼。到目前为止，我这样做是为了保持 javascript 文件较小，并且仅依赖于 WordPress 提供的 React 和 React-Dom 脚本。

我希望在开发过程中采用老式方式进行操作：

import React, { useState } from 'react';

所以我想我想保持文件小并使用 WordPress 已经加载的内容，但在开发过程中可以舒适地使用适当的 React。

Answer 1

实际上，Wordpress 提供了一种非常舒适的方式来为您自己进行设置。就像@Emilel 指出的那样，只需执行以下操作：

1. 安装

   @wordpress/element

   和

   @wordpress/scripts

2. 调整 package.json 内的脚本/构建以包含

   "wp-scripts build"

   和脚本/启动

   "wp-scripts start"

3. 将像

   import { useEffect, useState } from "@wordpress/element";

   这样的 React 元素添加到你的 javascript / typescript 中。
4. 奔跑

   npm run build

5. 无论在何处将脚本排入队列，都需要自动创建的 *.asset.php 文件夹。并将其作为依赖项添加到 enqueue_script 函数中。