nwbを使用したReactでの新しいアプリケーションのクイックスタート

オリジナルはこちらです。



Reactでいくつかのアプリケーションを作成したので、毎回最初からやり直すのは非常に退屈です。 webpack、webpack-dev-server、Babelにいくつかのプリセットとプラグイン、Karma、React、JSON、CSS、画像、フォント用のローダーを設定し、これらすべてを組み合わせる必要があります。





代替案はボイラープレートかもしれませんが、それらの多くには不要なものがすべて含まれており（ルーター、Reduxまたはサーバー側のレンダリング）、必要なもの（CSSローダー、ユニットテストなど）の一部をカバーしていません。 異なるプロジェクトが異なる構成を必要とするという事実は言うまでもありません。



今日、物事は本当に急速に変化しており、定型文は非常に急速に老化しています。 ボイラープレートを使用してアプリケーションを作成した後、すべての依存関係を最新の状態に保つのはユーザーの責任です。 私はいくつかのプロジェクトの依存関係を更新しましたが、これにはかなり愚かな繰り返し作業が必要です。



今、私はnwbを使用することを好みます。



手順1. nwbをインストールします。

$ npm install -g nwb
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ステップ2. nwbコマンドを使用して、新しいReactアプリケーションを作成します。

 $ nwb new react-app scoreboard
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ステップ3.内部を見ます。

 $ cd scoreboard $ ls README.md nwb.config.js public tests node_modules package.json src
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

webpack.config.jsも、 .babelrcもkarma.conf.jsもありません。 nwb.config.jsのすべての設定。 見てみましょう。

 $ cat nwb.config.js module.exports = { type: 'react-app' }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

構成は最小限です！ Reactアプリケーションを開発中であり、妥当なデフォルト設定が作成されることを示すだけです。



package.json

 $ cat package.json { "name": "scoreboard", "version": "1.0.0", "description": "Describe scoreboard here", "private": true, "scripts": { "build": "nwb build", "clean": "nwb clean", "start": "nwb serve", "test": "nwb test" }, "dependencies": { "react": "0.14.x", "react-dom": "0.14.x" }, "devDependencies": { "nwb": "0.7.x" }, "author": "", "license": "MIT", "repository": "" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

依存関係にあるのは、 reactとreact-domだけです。

devDependenciesではnwbのみ。 webpackでも、KarmaやBabelでもありません-これらはすべてnwbによって管理されています。 Nwb自体には、これらすべてが連携して機能することを確認するための多くのテストが含まれています。



手順4.サーバーを起動します。

 $ npm start -- --auto-install [...] nwb: serve-react-app nwb: dev server listening at http://localhost:3001 webpack built a98e92c8c4d34bae8856 in 2791ms
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、webpack-dev-serverが起動します。

ファイルを変更してみてください。 webpackとBabelが既にホットリロードReactコンポーネント用に構成されていることがわかります。

npmモジュールをインポートしてみてください。例：

 import Rx from 'rx'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

--auto-installフラグのおかげで、ファイルを保存すると、欠落している依存関係がインストールされ、 package.jsonに追加されます。

CSSファイルを作成してインポートします。 Webpackは既に構成されており、正しいローダーと自動プレフィックスが含まれています。

これらすべてを手動で設定するには、時間がかかります。



ステップ5.テストを実行します。

 $ npm test -- --server --coverage [...] SUMMARY: √ 1 test completed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、webpackおよびテストカバレッジ測定と統合されたKarmaが起動します。

--serverフラグを使用すると、ファイルを保存するとテストが再開されます。

--coverageフラグを使用してレポートが作成されます。 エディターのプラグインをインストールして、テストでカバーされている行とされていない行を確認できます。







最後に、実行

 $ npm run build
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコマンドは、静的アセットを生成します。 node_modulesの JavaScriptとCSSはvendor.jsとvendor.cssに送られ 、アプリケーションコードはapp.jsとapp.cssに送られます。 ソースマップは、別の.mapファイルに作成されます。 その後、それらをWebサーバーにアップロードできます。



私はいくつかのプロジェクトでnwbを使用しました。

wonderstudioの以前のバージョンのnwb。

nwbの設定は多少制限されていますが、そのままでは90％動作しますが、webpackを希望どおりに設定するには修正プログラムを作成する必要があります。

nwbによって、彼は構成の柔軟性を高めるという意思を表明しました。



私が書いた最後のいくつかのライブラリもnwbを使用しています（例： redux-sendおよびave ）。 モジュールのUMD、CommonJS、およびES6バージョンを生成できます。



ご覧のとおり、nwbを使用して、純粋なJSまたはReactコンポーネントを使用してWebアプリケーションとライブラリを開発、テスト、および構築することもできます。



執筆時点では、nwbはBabel 5を使用していますが、nwbと同等の外観とテストが可能なツールを探す必要があります。 単体テストのサポートが組み込まれているため、私にとっては他のテストよりも望ましい方法です。D