WordPress+TypeScript环境下React导入优化：开发用本地包，生产用WP内置脚本

1. 安装React类型依赖（仅开发用） #

先装TypeScript类型包，仅作为开发依赖，不会增加最终打包体积：

npm install @types/react @types/react-dom --save-dev

2. 配置全局类型声明，让TS识别wp对象 #

在src目录下创建globals.d.ts文件，内容如下：

declare global {
  interface Window {
    wp: {
      element: typeof import('react');
      dom: typeof import('react-dom');
    }
  }
}

export {};

这样TypeScript就能把wp.element和标准React的类型关联起来，开发时写import React就能获得完整的类型提示。

3. Webpack配置排除React打包 #

修改webpack.config.js，添加externals配置，告诉Webpack将React/ReactDOM视为外部依赖，直接复用WordPress内置版本：

module.exports = {
  // ...你的其他Webpack配置
  externals: {
    'react': 'wp.element',
    'react-dom': 'wp.dom'
  }
};

配置后，Webpack会自动把代码里的import React from 'react'替换成全局的wp.element，完全不会把React代码打包进你的插件文件。

4. 开发时正常使用标准React语法 #

现在你可以像常规React项目一样写代码，享受完整的TypeScript类型支持：

import React, { useState, useEffect } from 'react';

export const MyDashboardComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/wp-json/my-plugin/v1/data')
      .then(res => res.json())
      .then(setData);
  }, []);

  return (
    <div className="my-plugin-component">
      {data ? <p>{data.title}</p> : <p>加载中...</p>}
    </div>
  );
};

注意事项 #

• 确保你的WordPress插件代码里已经通过wp_enqueue_script正确加载了wp-element和wp-dom脚本，这是复用内置React的前提
• 尽量让@types/react的版本和WordPress内置的React版本匹配（比如WP 6.0+用React 18，就装@types/react@^18.0.0）

内容的提问来源于stack exchange，提问作者photogenic