「Reactで堅牢なWebアプリを構築する：パート2、Browserifyで最適化する」、Matt Hinchliffeの翻訳
翻訳者から：これは、記事シリーズ「Reactを使用した堅牢なWebアプリの構築」の第2部の翻訳です。
翻訳：
第1部では、Reactが同型またはアダプティブハイブリッドWebサイトの構築に使用できるエキサイティングなツールである理由を強調しました。これは、20年前のモバイルアプリケーションのダイナミズムと静的ページの信頼性に匹敵します。 また、Reactのパラダイムと機能のいくつかを調査し、動的ブラウザーアプリケーションのプロトタイピングがいかに高速であるかを示すために、基本的なデモアプリケーションを作成しましたが、これは私が当初目指していた信頼性をほとんど実証していません。
最初のデモでブラウザに提示されたコードは、基本的なパフォーマンステストに合格しません。 スクリプトは、実稼働環境に送信する前にプリコンパイル、結合、および縮小する必要があります。
JSX構文から純粋なJavaScriptへのコードのプリコンパイルは、NPMパッケージとしてインストールされる
React Toolsコマンドラインで実行できます。
$ npm install -g react-tools
React Toolsは
.jsxから
.jsファイルへの1対1の
.jsxを行うことができ、プロジェクトの依存関係ツリーを構築するために
require CommonJS命令を認識するのに十分スマートです。 つまり、このツールは1つのエントリポイントのみを受け取るアプリケーション全体を処理できるため、各スクリプトを個別に単調に変換する必要はありません。 Tube Trackerアプリケーションの依存関係が決定されると、拡張子が
.jsxファイルで始まる次のコマンドで変換できます。
$ jsx --follow-requires -x jsx app/ public/scripts/
React Toolsは問題の一部を解決しますが、別のスクリプトではまだマージと縮小が必要です。 通常、ビルドプロセスをいくつかのステップで操作すると、
Gruntや
Gulp.jsのようなタスクランナーが
役立ちますが、クライアントとサーバーでも実行する必要がある単純なアプリケーションの場合は、
Browserifyを使用するだけ
ですおよび
NPMスクリプト 。
Browserifyを使用すると、開発者はNode.jsモジュラーシステムと互換性のある個別のモジュールをCommonJSスタイルで記述し、単一のファイルにコンパイルすることができます。 Browserifyには、いくつかのNode.jsモジュールのブラウザーバージョンも含まれており、このライブラリーの配布を作成するために
React自体によっても使用さ
れます。 これは純粋なJavaScript環境で使用するのに適したツールです。慎重なソリューションを使用すると、アプリケーションのクライアント部分とサーバー部分の両方でコードを再利用できるためです。
Browserifyは、処理されるすべてのスクリプトを渡す拡張機能または「ソース変換」をサポートするため、タスクランナーは必要ありません。 JSXのプリコンパイル（
Reactify ）とその後の縮小（
Uglifyify ）のための変換があります。 すべてのパッケージをNPM経由でインストールして、パッケージマニフェストに保存できます。
$ npm install --save-dev browserify reactify uglifyify
これでビルドプロセスを開始できますが、再入力したコマンドを保存するために、バッチスクリプトなどのパッケージマニフェスト（パッケージマニフェスト）に保存できます。 NPMには、
npm testや
npm startなど、一般的に使用されるケースの略語が事前定義されており、適切な変換とフラグを使用してBrowserifyを実行するために任意のビルドスクリプトを定義できます。
{ ... "scripts": { "build-dev": "browserify -e app/bootstrap.js -t reactify -o public/scripts/bundle.dev.js -d", "build-min": "browserify -e app/bootstrap.js -t reactify -t uglifyify -o public/scripts/bundle.min.js" } }
したがって、2つのバッチスクリプトを連続して実行できます。
$ npm run-script build-dev && npm run-script build-min
最後に、便宜上、アプリケーションが実行されている環境に応じて、必要なスクリプトを提供するために、アプリケーションサーバー（Expressで作成）内に内部リダイレクトをインストールしました。
app.set("js", app.get("env") === "development" ? "dev" : "min"); app.use(function(req, res, next) { if (req.url === "/scripts/bundle.js") { req.url = "/scripts/bundle." + app.get("js") + ".js"; } next(); });
正直に言うと、この短いメモを書くのに1か月はかかりませんでしたが、Reactアプリケーションをテストする方法を説明するのは予想以上に困難でした。 これらの研究をパート3に取りました。
今すぐアプリケーションを
試すことができ
ます （注：この例は無料のアカウントで実行されているため、このリンクは不安定になる可能性があります）。 コメント
してください 、または
私に
読んでください 、私はフィードバックをうれしく思います。