WordPress 用 React 做的編輯器？

Question

我在瀏覽器中添加了“React 開發人員工具”作為 Chrome 擴展程序，它向我顯示了哪些站點正在使用 ReactJS。 今天寫一篇文章時，我注意到擴展顯示我的 WordPress 編輯器正在使用 React 的生產版本。

擴展顯示編輯器是在 React 中制作的

我很快訪問了我的 WordPress 站點，但擴展程序沒有在那里觸發。

實際WordPress網站

那么這里發生了什么？ 這只是擴展程序中的錯誤嗎？ 我知道你可以使用 WordPress 作為 React 中的無頭 CMS，但這里肯定不是這種情況。

Answer 1

我想你的 wordpress 編輯器只是使用了一個用網站不需要的 react 編寫的組件（也許是編輯器本身？）。

這並不少見。 例如，如果您在您的網站上添加“Facebook 評論插件”，它將在后台添加反應。 如果您啟用了 react 擴展，它會告訴您已找到 react，即使它僅用於網站的一小部分。

此外，我認為您的讀者並不打算使用編輯器，因此他們不必下載它是有道理的，因為他們不需要。

要確認是這種情況，您可以打開 chrome 開發工具並使用“ network ”——它會准確地告訴您當前頁面請求了哪些資源。

Answer 2

React 包含在 WordPress 的核心中，顯然，它嵌入了生產版本。

以下不是最干凈的解決方案，但對主題開發很有用。 它通過在排隊時替換開發版本的生產版本來工作。 您可以檢查您的 WordPress 安裝正在使用的 React 版本。

add_filter( 'script_loader_tag', function ( $tag, $handle, $src ) {
$replace = [
    'react' => 'https://unpkg.com/react@16.9.0/umd/react.development.js',
    'react-dom' => 'https://unpkg.com/react-dom@16.9.0/umd/react-dom.development.js'
];
if (!array_key_exists($handle, $replace)) return $tag;
$newTag = str_replace($src, $replace[$handle], $tag);
$newTag = str_replace('><', ' crossorigin><', $tag);
return wp_get_environment_type() === 'development'
    ? $newTag
    : $tag; 
}, 10, 3 );

確保您已在 wp-config.php 中將環境設置為“開發”。

define( 'WP_ENVIRONMENT_TYPE', 'development' );