我正在尝试使用 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 行来阻止它。
From #191 反应开发工具 https://github.com/facebook/react-devtools/issues/191
<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>
然后,您可以考虑将其与您的环境条件结合起来,就像您可以在服务器端渲染中执行如下操作一样。比方说 Pug(以前称为 Jade):
#{process.env.NODE_ENV == 'production' ? "window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function(){}" : ""}
但是,将业务逻辑和敏感数据放回服务器仍然是一个很好的做法。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)