我正在尝试使用 gulp 和 envify 对我的 React 应用程序进行浏览器化以设置 NODE_ENV。因此，我可以删除反应警告、控制台中的错误报告，甚至我的代码来禁用某些功能，例如react-addons-perf的要求。
而且效果很好。当我在 app.js 中搜索“生产”以查看是否存在这些典型条件时：
if("development" !== "production") {
...
}
什么都没有，所以，正如我所说，它似乎运作良好。
但是，我仍然可以看到 chrome 的 React DevTools 选项卡以及所有 React 组件，就像我在开发网站上一样。 如何在 Chrome 的开发工具中禁用此选项卡？
这是我的任务：
var production = process.env.NODE_ENV === 'production' ? true : false;
var environment = process.env.NODE_ENV ? process.env.NODE_ENV : 'dev';
...
var bundler = browserify({
debug: !production,
// These options are just for Watchify
cache: {}, packageCache: {}, fullPaths: true
})
.require(require.resolve('./dev/client/main.js'), { entry: true })
.transform(envify({global: true, _: 'purge', NODE_ENV: environment}), {global: true})
.transform(babelify)
.transform(reactify);
var start = Date.now();
bundler.bundle()
.on('error', function (err) {
console.log(err.toString());
this.emit("end");
})
.pipe(source('main.js'))
.pipe(gulpif(options.uglify, streamify(uglify())))
.pipe(gulpif(!options.debug, streamify(stripDebug())))
.pipe(gulp.dest(options.dest))
.pipe(notify(function () {
console.log('Built in ' + (Date.now() - start) + 'ms');
}));
};
根据 Github 上的问题，您可以在加载 React 之前添加运行单个 javascript 行来防止它。
来自react-devtools的#191
<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>
然后，您可以考虑将其与您的环境条件一起包装，就像您可以在服务器端渲染中执行如下操作一样。比方说 Pug（以前称为 Jade）：
#{process.env.NODE_ENV == 'production' ? "window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function(){}" : ""}
但是，将业务逻辑和敏感数据放回服务器仍然是一个很好的做法。
如果您正在使用
redux-devtools-extensionconst devTools =
process.env.NODE_ENV === "production"
? applyMiddleware(...middlewares)
: composeWithDevTools(applyMiddleware(...middlewares));
const store = createStore(rootReducer, initialState, devTools);
这将确保您的 devtools 扩展仅适用于开发环境，而不适用于生产环境
只需改进@peteriod答案，以确保开发工具是否已安装
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
}
您还可以通过在 package.json 文件中添加以下命令来在构建后删除所有源映射。
"scripts":{
...,
"build": "react-scripts build",
"postbuild": "rimraf build/**/*.map"
}
这使得导航组件有点困难并将它们隐藏在开发工具中 - 源代码
您可以检查模式：
在
public文件夹中的index.html中的
</body>之前添加以下代码
<input type="hidden" value="%NODE_ENV%" id="node_env_mode" />
<script>
var mode = document.querySelector("#node_env_mode").value;
if (
mode === "production" &&
typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object"
) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {};
}
</script>
您可以使用 @fvilers/disable-react-devtools 包来禁用 React Developer 工具
首先安装上面提到的软件包
npm i @fvilers/disable-react-devtools
或
yarn add @fvilers/disable-react-devtools
比
在加载 React 之前在主文件中调用
disableReactDevTools()import React from 'react';
import ReactDOM from 'react-dom';
import { disableReactDevTools } from '@fvilers/disable-react-devtools';
import App from './App';
if (process.env.NODE_ENV === 'production') {
disableReactDevTools();
}
ReactDOM.render(<App />, document.getElementById('root'));
我的解决方案适用于
npm run build.env.productionpackage.jsonINLINE_RUNTIME_CHUNK=true.env.productionGENERATE_SOURCEMAP=false*.mapnpm run build尝试将其添加到您的 store.js 中
const initialState = {};
const middleware = [thunk];
const devTools =
process.env.NODE_ENV === "production"
? applyMiddleware(...middleware)
: composeWithDevTools(applyMiddleware(...middleware));
const store = createStore(rootReducer, initialState, devTools);
export default store;
为了删除开发工具，您必须从文件 index.js 中删除以下行：
mainWindow.webContents.openDevTools();
它是index.js的一行，即第23行。
这个解决方案非常适合我，在根文件中定义以下函数，然后调用
disbaleReactDevTools()
const disableReactDevTools = (): void => {
const noop = (): void => undefined;
const DEV_TOOLS = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
if (typeof DEV_TOOLS === "object") {
// eslint-disable-next-line no-restricted-syntax
for (const [key, value] of Object.entries(DEV_TOOLS)) {
DEV_TOOLS[key] = typeof value === "function" ? noop : null;
}
}
};
您可以在这里找到更多详细信息：https://github.com/facebook/react-devtools/issues/191#issuecomment-443607190
我总是使用
fvilers/disable-react-devtools您所需要做的就是使用安装此软件包
npm i @fvilers/disable-react-devtools
然后告诉您的应用程序您处于生产环境中。通过
将包导入到您的应用程序中import { disableReactDevTools } from '@fvilers/disable-reactdevtools';
然后在应用程序组件之上使用以下代码片段。
import { disableReactDevTools } from '@fvilers/disable-react-devtools';
if (process.env.NODE_ENV === 'production') {
disableReactDevTools();
}