Как исключить / отключить React Developer Tools в производственной сборке?

Question

Как следует из названия, инструменты разработчика должны быть видимы или доступны только во время разработки , а не в производстве . Я не хочу, чтобы мои конечные пользователи видели состояние и дерево компонентов, таким образом, зная, что происходит под капотом. Хотя React Developer Tool в рабочей среде не позволяет изменять состояние компонентов и не раскрывает их имен, он не скрывает их полностью и не отключает инструменты в целом. Конечные пользователи все еще могут видеть состояние каждого компонента и все дерево приложений.

Есть ли способ исключить / отключить инструменты React Developer или отключить его в производственной сборке, например, как Augury для Angular?

Answer 1

Пока я искал в inte rnet ответы, пока этот вопрос еще в черновике, я нашел этот один. Но, к сожалению, это не сработало. Однако он сказал мне, что это как-то связано с __REACT_DEVTOOLS_GLOBAL_HOOK__.

Итак, поиграв с ним и изменив, все заработало. Он успешно отключил приложение от React Developer Tools.

Вот код для отключения приложения от React Developer Tools.

// disableReactDevTools.ts

// Declare the types if you're using TypeScript
// Remove 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") {
      // this line will remove that one console error

      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();
// ...

Этот код выдаст любую ошибку или предупреждение в консоли.