セットアップのWebパックとBabel反応JSアプリケーション

導入

反応の初心者として.私はあなたの反応アプリケーションをブートストラップのためのFacebookの開発者によって開発されたオープンソースプロジェクトであり、単純なボイラープレートを提供しています.しかし、開発者として私は常にこのコマンドが実際に何を理解する好奇心旺盛ですか?他の依存関係は、反応アプリケーションに役立つために必要ですか?初心者として私は反応スクリプトのように考えていた唯一の依存関係を構築し、反応アプリを実行する必要があります.しかし、私が反応でより多くをドリルダウンするように、私はトランスポーターとバンドルについてより多くを知っています.
私は、反応アプリを作成するために様々な方法があったことを知る.それはすべての設定を非表示にし、カスタムビルドの設定を追加するための柔軟性を提供していないので、反応アプリは、反応アプリを作成する抽象的な方法です.だから私は実際に作成された反応アプリで使用されている私自身の設定でWebpackとBabelを設定するに移動しますが、それは抽象的な設定です.
私はあなたが反応について知っていると仮定しています.JSとあなたは、あなたのプロジェクトでWebpackとBabelの構成を学ぶためにここにいます.

なぜ我々はバベルを使用しますか？

まあ答えは簡単です、私たちのブラウザは、最新のecmascriptの構文に互換性がないので、Babelは、トランスコンパチブルであるか、後方互換性にコードを変換するES 5またはES 6コードへの最新のecmascript構文をトランスコンパイル(Translile)に私たちを助けます.
あなたがBabelを使いたくないならば、あなたは反応のためにES 5またはES 6構文の知識を持っている必要があります.アプリケーション開発.

何が正確にwebpackですか？

簡単なWordでは、WebPackはアプリケーションのバンドルです.あなたのプロジェクトでは、多くのコンポーネントを作成する可能性がありますこれらのコンポーネントは、別のファイルを右に書き込まれます!今、ケースを想像すると、あなたのアプリケーションで10のコンポーネントがあり、それは明らかに10のスクリプトファイルです.アプリケーションを配備する場合は、これらのファイルとその依存関係を追跡する必要があります.それで、ここでWebpackは絵に来ます.
Webpackはあなたのすべてのファイルを追跡し、あなたのアプリケーションの依存グラフを作成し、おそらくおそらく依存関係と一緒にすべてのファイルをバンドルされる1つのファイルを作成します.それは偉大なことではない!

フォルダ構造の作成

今、フォルダ内のファイルを維持する方法を参照してください.この構造はあなたの選択によって異なるかもしれません.私が個人的に好む構造をあなたに見せます.選択はあなたです!

フォルダを作成し、アプリケーション名に従って名前を付けます.

コマンドプロンプト(CMD)のフォルダを開きます.

CMDで以下のコマンドを実行します.

npm init

これはパッケージ名、作者名のような基本的な情報をあなたに尋ねるでしょう.説明とライセンス.この情報を使ってパッケージと呼ばれるファイルを作成します.JSON

プロジェクトフォルダー内にSRCフォルダーを作成し、indexという名前の空のファイルを追加します.インデックス.HTMLとプロジェクトレベルで2つの設定ファイルを作成します.BabelrcとWebpack.設定.このようなJS:

注意:ファイル名を指定します.BabelrcとWebpack.設定.JSは言及したように全く同じであるべきです.

インストール

今、BabelとWebPackを使用して反応アプリケーションを構成するために本質的に必要なパッケージをインストールする必要があります.

私たちの主な依存パッケージをインストールし、反応し、DOMを反応させる.

npm i -S react react-dom

Babelをアプリケーションのdev依存性としてインストールします.

npm i -D babel-core babel-loader babel-preset-env babel-preset-react

バベルコア:バベルのメインエンジンパッケージです.

バベルローダ:ローダはBabelとWebpackの助けを借りて後方互換性のあるJSコードで反応JSXコードを中継します.

BabelプリセットENV : ES 5/ES 6 JavaScriptへのサポートを追加します.

Babelプリセット反応:反応JSXコードのサポートを追加します.
注意:必要です.あなたがBabel 6を使いたいならば..Babelローダをインストールしてください.7 .*

npm install --save-dev [email protected]

OR

npm install --save-dev @babel/core

ウェブパックをアプリケーションのdev依存性としてインストールします.

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

WebPack : Webpackプラグインのメインエンジンです.

Webpack CLI : WebPackを設定するためのコマンドラインツールとプラグインです.

Webpack dev server :アプリケーションの生のサーバーを開発するのに役立ちます.

HTML Webpackプラグイン:アプリケーションのHTMLテンプレートを作成するのに役立ちます.

これらはインストールするために必要な最小限のパッケージです.では、設定ファイルの設定を追加します.

バベルの設定

でBabelrcは私たちはあなたのアプリケーションで使用されるプリセットを定義します.
下記のコンテンツをペーストしてください.ベーベック

{"presets":["env", "react"]}

Webパックの設定

webpackで.設定.以下の設定を追加する必要があります

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
   entry: './src/index.js',
   output: {
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   },
   devServer: {
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         },
         {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }
      ]
   },
   plugins:[
       new HtmlWebpackPlugin({
            template: path.join(__dirname,'/src/index.html')
       }) 
   ]
}

エントリ:ここで我々のアプリケーションのエントリポイントを定義します.この時点から、Webpackはバンドルされます.

出力:束のファイルが存在する場所を定義します.すなわち、/dist/束.JS

DEVServer :開発サーバ関連の設定は、開発サーバのポート番号8080を提供しています.

テスト:どのファイルがどのローダを通過するかを定義する正規表現を定義します.

exclude :ローダによって除外されるファイルを定義します.

Loader :ここで使用するローダを定義します.

パッケージ内のスクリプトの設定JSON

我々はいくつかのスクリプトコマンドを実行してビルドする必要があります.JSON

"start": "webpack serve --mode development --open --hot",
"build": "webpack --mode production"

今すぐあなたのパッケージ.JSONは次のようになります.

反応コンポーネントの作成

それでは、アプリケーションに簡単なHello Worldコンポーネントを追加しましょう.あなたのインデックス.インデックス.HTMLファイルは次のようになります.

//_index.js_

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    <div>
      <h1>Hello!!</h1>
      <h2>Welcome to your First React App..!</h2>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

//_index.html_

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React Web</title>
   </head>
   <body>
      <div id = "root"></div>
      <script src = 'bundle.js'></script>
   </body>
</html>

アプリを実行する

私は非常に我々のアプリケーションを実行し、適切に動作しているかどうかを確認して興奮している.下のコマンドを実行し、ブラウザでアプリケーションを開きます.

npm start

あなたのアプリケーションは「http://localhost:8080/」で開きます

プロダクションバンドルを生成するには、以下のコマンドを実行します.

npm run build

上記のコマンドはdistフォルダを作成し、その中にバンドルと呼ばれる2つのファイルを作成します.インデックス.作成可能なファイルです.
おめでとう!あなたが正常にWebpackとBabelであなたの反応アプリケーションを構成している.

結論

このブログではWebpack、Babel、WebpackとBabelの設定による反応アプリケーションの開発について理解しました.

Thanks for reading this blog post. Hope it’s been useful for you. Please post comment and your questions in comment box. I would be happy to fix your problems.

場合は、この記事は、お友達や同僚と共有してください有用な発見!❤️
記事を読む➡️
フォローミーオン⤵️
🌐
🌐 Github