如何在生产构建中排除/禁用React Developer Tools

Question

顾名思义，开发人员工具应该仅在开发期间可见或可访问，而不是在生产中。我不希望我的最终用户看到状态和组件树，从而知道引擎盖下发生了什么。尽管React Developer Tool in Production既不允许修改组件的状态，也不透露它们的名称，但它并没有完全隐藏它们或完全禁用这些工具。最终用户仍然可以看到每个组件的状态和整个应用程序树。

有没有一种方法可以在生产构建中排除/禁用React Developer工具或断开它的连接，就像Augury为Angular所做的那样？

Answer 1

当我在互联网上搜索答案时，这个问题还在起草中，我找到了这个。但遗憾的是，这并没有奏效。然而，它确实告诉我，它与__REACT_DEVTOOLS_GLOBAL_HOOK__有关。

因此，在玩了它并对它进行了修改之后，它起了作用。它成功地断开了应用程序与React Developer Tools的连接。

以下是断开应用程序与React Developer Tools连接的代码。

// disableReactDevTools.ts
// Declare the types if you're using TypeScript
// Ignore this block if you're using JavaScript
declare global {
interface Window {
__REACT_DEVTOOLS_GLOBAL_HOOK__: any;
}
}
export function disableReactDevTools() {
// Check if the React Developer Tools global hook exists
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ !== "object") {
return;
}
for (const prop in window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
if (prop === "renderers") {
// initialise this with an empty `Map`,
// else it will throw an error in console
window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] = new Map()
} else {
// Replace all of its properties with a no-op function or a null value
// depending on their types
window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] =
typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] === "function"
? () => {}
: null;
}
}
}

// index.tsx
import React from "react";
import ReactDOM from "react-dom";
// ...
if (process.env.NODE_ENV === "production") disableReactDevTools();
// ...

此代码不会在控制台中引发任何错误或警告。