Trusted React Webアプリケーションの構築：パート2、Browserifyによる最適化

「Reactで堅牢なWebアプリを構築する：パート2、Browserifyで最適化する」、Matt Hinchliffeの翻訳



翻訳者から：これは、記事シリーズ「Reactを使用した堅牢なWebアプリの構築」の第2部の翻訳です。

翻訳：

• 堅牢なReact Webアプリケーションの構築：パート1、ブラウザープロトタイプ
• Trusted React Webアプリケーションの構築：パート2、Browserifyによる最適化
• Trusted React Webアプリケーションの構築：パート3、Jasmineを使用したテスト
• 堅牢なReact Webアプリケーションの構築：パート4、サーバー生成

第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に取りました。 今すぐアプリケーションを試すことができます （注：この例は無料のアカウントで実行されているため、このリンクは不安定になる可能性があります）。 コメントしてください 、または私に読んでください 、私はフィードバックをうれしく思います。