禁用 chrome react DevTools 进行生产

IT技术 javascript google-chrome reactjs gulp browserify
2021-04-08 12:59:17

我正在尝试使用 gulp 和 envify 来浏览我的用于生产的 react 应用程序以设置 NODE_ENV。所以我可以删除react警告、控制台中的错误报告，甚至我的代码来禁用一些功能，比如 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');
    }));
};
6个回答

根据 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(){}" : ""}

但是，将业务逻辑和敏感数据放回您的服务器仍然是一个好习惯。

@LoveTrivedi 如果您没有安装 react devtools，这可能会发生。因此，您的代码可能应该检查是否__REACT_DEVTOOLS_GLOBAL_HOOK__首先定义。
2021-05-22 12:59:17
去chrome://extensions/看看“React Developer Tools”是否被激活
2021-05-29 12:59:17
我收到以下错误：无法设置未定义的属性“注入”
2021-06-01 12:59:17
@LoveTrivedi 你是通过服务器渲染这个吗？记住 Node 没有 window 对象。将代码片段包裹在 if (window){ ... }
2021-06-05 12:59:17

如果您正在使用，redux-devtools-extension您可以执行此操作。

const devTools =
  process.env.NODE_ENV === "production"
    ? applyMiddleware(...middlewares)
    : composeWithDevTools(applyMiddleware(...middlewares));

const store = createStore(rootReducer, initialState, devTools);

这将确保您的 devtools 扩展仅适用于开发环境而不适用于生产环境

这个答案是指 redux 开发工具而不是 react-devtools。
2021-05-27 12:59:17

只需改进@peteriod 答案，以确保已安装开发工具

if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
}
我们如何分配/访问脚本标签内的环境变量？以便仅在生产模式下启用。
2021-05-31 12:59:17
@siluverukirankumar 添加此条件 "%NODE_ENV%" !== "development"
2021-06-02 12:59:17
您可以将其添加到公共文件夹中的 index.html 文件中。
2021-06-13 12:59:17

尝试在你的 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;

您还可以通过在 package.json 文件中添加以下命令来在构建后删除所有源映射。

"scripts":{
     ...,
    "build": "react-scripts build",
    "postbuild": "rimraf build/**/*.map"
}

这使得导航组件并将它们隐藏在 devtools 上变得有点困难 - 来源

其它你可能感兴趣的问题
上一篇React-native google 登录会出现开发人员错误 下一篇如何动态导入SVG并内联渲染