生產模式下禁止React Developer Tools、Redux DevTools的使用

1、React Developer Tools和Redux DevTools的使用思考

React Developer Tools、Redux DevTools 能夠給開發人員在研發階段調試程序帶來極大的方便。 可是，不少人忽略了一點：上了生產環境後，把一些代碼細節輕易讓外部人員獲取，並非好事。

解決方案就是：生產環境下，將DevTools禁止使用。

2、 禁止React Developer Tools

如下是實現的代碼

// 項目入口文件index.tsx
import {
  disableReactDevTools
} from '@utils/js/other';
if(process.env.NODE_ENV == 'production'){
  disableReactDevTools();
}
複製代碼

// @utils/js/other.ts
export const disableReactDevTools = (): void => {
    const noop = (): void => undefined;
    const DEV_TOOLS = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;

    if (typeof DEV_TOOLS === 'object') {
        for (const [key, value] of (<any>Object).entries(DEV_TOOLS)) { DEV_TOOLS[key] = typeof value === 'function' ? noop : null; } } }; 複製代碼

禁止思路以下：

• 在頁面的React加載完成以前（因此要在入口文件提早執行），執行如下代碼

window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
複製代碼

這樣能夠阻止devtools訪問React上下文

• 在此基礎上，遍歷全部window.__REACT_DEVTOOLS_GLOBAL_HOOK__下掛載的方法，將其重置爲空函數。
• 有些瀏覽器是訪問不到windwo.__REACT_DEVTOOLS_GLOBAL_HOOK__的，因此要進行安全防禦。

綜合以上3點，就能夠得出disableReactDevTools方法。

另外，只在生產環境禁止,則須要讀取process.env.NODE_ENV的值，進行判斷。符合要求，則執行disableReactDevTools方法。

3、禁止Redux DevTools

Redux DevTools的做者作得比較全面，已經給出了標準的解決方案。

具體實現步驟以下：

• 設置'process.env.NODE_ENV': JSON.stringify('production')
• 使用redux-devtools-extension/developmentOnly引入方法

如下是個人項目代碼片段：

import {
    composeWithDevTools
} from 'redux-devtools-extension/developmentOnly';

// other code...
const store = createStore(
    rootReducer,
    composeWithDevTools(middlewareEnhancer)
);
// other code...
複製代碼

4、很差的真實項目例子

騰訊雲－華佗診斷分析系統

5、參考

[1] Flag to disable devtools

[2] Redux DevTools的README.md

---

喜歡我文章的朋友，能夠經過如下方式關注我：

• 「star」 或 「watch」 個人GitHub blog
• RSS訂閱個人我的博客：王先生的基地