禁用 Chrome React 开发工具以进行生产环境

Question

禁用 Chrome React 开发工具以进行生产环境

javascriptgoogle-chromereactjsgulpbrowserify

23

我正在尝试使用gulp和envify为生产环境browserify我的React应用程序。这样，我就可以消除React警告、控制台中的错误报告，甚至通过编码禁用一些功能，例如对react-addons-perf的需求。

它工作得很好。当我在我的app.js中搜索"production"时，看看是否有这些典型的条件：

if("development" !== "production") {
    ...
}

没有什么比我之前说的更好，所以它似乎运行良好。

但是，我仍然可以在Chrome的React DevTools选项卡中看到所有的React组件，就像我在开发网站上一样。 如何在Chrome的DevTools中禁用此选项卡？

这是我的Gulp任务：

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');
    }));
};

- Poirette

3

Chrome浏览器中的实际插件？你为什么想要这样做？你的js代码不应包含任何敏感信息。为什么Chrome会允许网站通过javascript来更改Chrome中的内容？想一想 - 这将是一个巨大的安全漏洞，因为可以通过javascript在用户浏览器中启用/禁用某些功能。 - Dominic

1

是的，Chrome 插件。别担心，如果用户没有经过身份验证，他什么也做不了：每个请求都会在服务器端使用强秘钥（1024 个字符）检查令牌。我的问题是，这是否可能以及如何实现？据我所知，这是可能的，因此我在这里询问为什么我的 gulp 任务无法正常工作。 - Poirette

啊，我明白了，如果没有全局的React或require，它就不起作用，但是我不确定特定的设置。 - Dominic

我最近发布了一个禁用React Developer Tools插件的包：https://www.npmjs.com/package/@fvilers/disable-react-devtools - Fabian Vilers

4

如果有人对绕过此处的“保护”感兴趣，可以使用Chrome中的本地覆盖功能，在美化后删除有问题的行。例如：https://www.trysmudford.com/blog/chrome-local-overrides/ - nelsonjchen

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohammed Sabah · Answer 1

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