最も単純な環境を構築するために反応します

1.まず、あなたはノードとNPMを持っている必要があります

2. NPM、デモ・ディレクトリに移動します-yインストールします。モジュールの記述ファイルpackage.jsonを作成し、すべてのパラメータのデフォルト-yです。NPMは、モジュールになることができライブラリ、フレームワークやプロジェクトを使用して作成し、モジュール説明ファイルがpackage.jsonです。

3.インストールのWebPACKとのWebPACK-CLI、NPM WebPACKのWebPACKの-CLI --save-devをインストールしてください。あなたがインストールする必要があるので、すべて、最初webpack4のWebPACKとのWebPACK-CLIとは別に管理されます。--save-devのは、プロジェクトの開発に依存としてインストールされています。

　　package.jsonに次のコードを追加します。

" スクリプト" ：{
   " ビルド"：" のWebPACKの--mode生産" 
}

4.バベル関連をインストールし、NPMバベルローダ@のバベル/コアする@バベル/プリセット-ENVする@バベル/プリセット反応--save-DEVを取り付けます。バベルローダはWebPACKのローダで、バベルは、トランスコーディング・ブラウザ・コードをES6よい理解することができます。

5.設定のバベル、ルートディレクトリに.babelrcファイルを作成するには、次のコードを追加します

{
   " プリセット"：[ " @のバベル/プリセット-ENV "、" @のバベル/プリセット反応します" ] 
}

6. WebPACKのプロフィールwebpack.config.jsを作成し、バベル・ローダーを通ってくるだろう、拡張子が.jsファイルがあることを意味し、コードのWebPACKをロードするために、次のコードを追加し、ES5 ES6に変換されます

module.exportsは= { 
  モジュール：{ 
    ルール：[ 
      { 
        テスト： /\.js$/ 、
        除外する： / node_modules / 、
        使用する：{ 
          ローダ：" バベルローダ" 
        } 
      } 
    ] 
  } 
}。

7.安装が反応-DOMを、NPM --save-DEV反応-DOMを反応インストール和反応します。

8.次のコードを追加し、SRCのindex.jsファイルフォルダを追加します。

インポートは「反応」からリアクト

「反応-DOM」からインポートReactDOM

クラスようこそReact.Componentを{拡張します

　　{レンダリング（）

　　　　<H1>こんにちは、{this.props.name} </ H1>を返します。

　　}

ReactDOM.render（<ようこそ名= "世界。"> </ようこそ>、のdocument.getElementById（ "ルート"））

9. runコマンドは、NPM実行するビルド・バンドルを生成し、バンドルは./dist/main.jsに配置されます。distの中にindex.htmlファイルを作成すると、次のコードを追加します

<！DOCTYPE HTML> 
<HTML> <HEAD> 
  <メタのcharset = " UTF-8 " /> 
  <メタHTTP-当量= " X-UA-互換性のある"コンテンツ= " IE =エッジ" > 
  <タイトル>ページのタイトル</タイトル> 
  <メタ名= " ビューポート"コンテンツ= " 幅=装置幅、初期の規模= 1 " > </ HEAD> 
  <BODY> 
    の<divのid = " ルート" > </ div> 
    <スクリプトSRC = " 。 /main.js " ></スクリプト> 
</ BODY> 
</ HTML>

10.オープンブラウザでindex.htmlファイルすべてがうまくいけば、Hello Worldのを表示します。テキスト。

11.使用のWebPACKは、自動的にHTML-のWebPACK - プラグインのHTMLローダー--save-devのインストール、スクリプトページにバンドルコマンドNPMを実行するプラグイン。その後、アップデートを設定WebPACKの

CONST HtmlWebPackPlugin =（必要とする" HTML-WebPACKの-プラグイン" ）。
module.exportsは = { 
  モジュール：{ 
    ルール：[ 
      { 
        テスト： /\.js$/ 、
        除外する： / node_modules / 、
        使用：{ 
          ローダ：" バベルローダ" 
        } 
      }、
      { 
        テスト： /\.html$/ 、
        使用：[ 
          { 
            ローダ：" HTML-ローダ" 
          } 
        ] 
      }
    ] 
  }、
  プラグイン：[ 
    新しいHtmlWebPackPlugin（{ 
      テンプレート：" ./src/index.html " 、
      ファイル名：" ./index.html " 
    }）
  ] 
}。

srcフォルダにindex.htmlファイルを追加します。

<！DOCTYPE HTML> 
<HTML> <HEAD> 
  <メタのcharset = " UTF-8 " /> 
  <メタHTTP-当量= " X-UA-互換性のある"コンテンツ= " IE =エッジ" > 
  <タイトル>ページのタイトル</タイトル> 
  <メタ名= " ビューポート"コンテンツ= " 幅=デバイス幅、初期スケール= 1 " > </ head> 
  <body> 
    <DIV ID = " ルート" > </ div> 
</ body> 
</ HTML>

すると、distのフォルダに合成htmlファイルとバンドルファイルを生成する効果を確認するには、ブラウザでindex.htmlを開きますNPMの実行ビルドを実行します。

12. WebPACKのdevのサーバーが自動的にプラグNPMが各変形で--save-DEVのWebPACK-DEV-サーバをインストールするインストール、ウィンドウを更新します。package.jsonで次のスクリプトを追加します。

" スクリプト" ：{
   " スタート"：" のWebPACK-devのサーバー--open --mode開発" 、
   " 構築"：" WebPACKの" 
}

13.今、NPMブラウザの表示ウィンドウを開き、自動的に起動し実行します。あなたは、コードウィンドウを変更するたびに自動的に更新されます。

そして、簡単な反応の開発環境を含めて、設定されています

ノードのプロジェクトを作成します。

包装項目についてWebPACKのインストールパッケージ

ES5にES6を変換するためのバベルのインストール、

インストールの反応

追加テンプレートHTMLスクリプトタグの束を生成するためのHTMLのWebPACK・プラグインのインストール

WebPACKの-devのサーバーインストール、小さなローカルサーバーを作成し、コードの変更後にウィンドウをリフレッシュするために使用されます

最後にpackage.jsonファイルは次のようになります。

{
   " 名前"：" react_demo_base " 、
   " バージョン"：" 1.0.0 " 、
   " 説明"："" 、
   " 主"：" index.js " 、
   " スクリプト" ：{
     " 開始"：" のWebPACK-DEV-サーバー--open --modeの開発" " ビルド」：" WebPACKの"
  }、
  " キーワード" ：[]、
   " 著者"："" 、
   " ライセンス"：" ISC " 、
   " devDependencies " ：{
     " @のバベル/コア"：" ^ 7.4.5 " 、
     " @のバベル/プリセット-ENV "：" ^ 7.4.5 " " @のバベル/プリセット-反応する"：" ^ 7.0.0 」、
    「バベル・ローダー」：" ^ 8.0.6 " 、
     " HTML-ローダー"：" ^ 0.5.5 " 、
     " HTML-のWebPACK-プラグイン"：" ^ 3.2.0 " 、
     " 反応"：" ^ 16.8.6 " 、
     「react- DOM "：" ^ 16.8.6 " " WebPACKの"：" ^ 4.35.0 " " WebPACKの-CLI 」：" ^ 3.3.5 "、
     " WebPACKの-devのサーバー"：" ^ 3.7.2 " 
  } 
}

迅速な開発環境を作成するために、反応NPM実行コマンドをインストールすることができ、以下に示すプロジェクトファイルを使用します

最も単純な環境を構築するために反応します

おすすめ