web-dev-qa-db-ja.com

無効にするchrome DevToolsを本番用に反応させる

NODE_ENVを設定するためにgulpとenvifyを使用して、本番用の反応アプリをブラウザ化しようとしています。そのため、コンソールでの反応警告、エラー報告、およびrequire-react-addons-perfなどの一部の機能を無効にするコードを削除できます。

そしてそれは素晴らしい働きをしています。 app.jsで「production」を検索して、これらの典型的な条件があるかどうかを確認すると、

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

何もないので、私が言ったように、それはうまくいくようです。

しかし、まだ開発Webサイトにいるかのように、Chromeのすべての反応コンポーネントを備えたChromeの反応DevToolsタブが表示されます。 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');
    }));
};
javascriptgoogle-chromereactjsgulpbrowserify
10
Poirette

Githubの問題によると、reactがロードされる前に単一のjavascript行を追加して実行を防ぐことができます。

From ＃191 of react-devtools から

<script>
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>

次に、サーバー側のレンダリングで以下のように実行できるように、これを環境条件でラップすることを検討できます。パグ（以前はジェイドとして知られていました）としましょう：

#{process.env.NODE_ENV == 'production' ? "window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function(){}" : ""}

ただし、ビジネスロジックと機密データをサーバーに戻すことは、依然として適切な方法です。

18
peteroid

redux-devtools-extensionを使用している場合は、これを行うことができます。

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

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

これにより、devtools拡張機能が開発環境でのみ機能し、本番環境では機能しないことが保証されます

6
Kenshinman

@peteriodの回答を改善して、Devツールがインストールされているかどうかを確認してください

if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
   __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
}
3
Cong Nguyen

また、package.jsonファイルに以下のコマンドを追加して、ビルド後にすべてのソースマップを削除することもできます。

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

コンポーネントをナビゲートするのが少し難しくなり、それらをdevtoolsで非表示にします-ソース

0
njmwas