の反応を破壊する

“フロントエンド開発者”と考えられるようになるパスは、2020年に漠然と定義されていますが、まだ基本的なHTML、CSS、およびJavaScriptから始まります.そこから、あなたはNPMについて学びます、そして、糸とSassとより少ないCSSプリプロセッサを加えてください.それから、ほとんどの人々は、フレームワークにまっすぐジャンプし、そこからすべての下り坂です.
多くの人々のために、反応する道は、「創造的な反応アプリ」プロジェクトの多数で舗装されます.これは必ずしも悪いことではなく、理由のために存在し、彼らが何をしているかを知っている以上の素晴らしい人々です.しかし、それはバックエンドで起こっていることの多くをマスクします.あなたのフロントエンドの.

何が作成反応アプリ

最初に何が生成反応アプリによって生成される話をすることができます.ファイルディレクトリ構造.また、プリロードされたパッケージ.これは非常に重要です.あなたがゼロから始めたならば、あなたはそれをあなた自身で構築しなければなりません.ごめんなさい.ちっとも.最後に、WebpackとBabelの設定も説明します.
我々が我々自身のプロジェクトを構築したい理由は、そうでなければ我々がこれらの構成を見るためにプロジェクトを「Eject」しなければならないので、これはあなた自身のプロジェクトを完全にコントロールする能力を制限します.

JavaScriptの状態

JavaScriptは一意に複雑な言語です.より低いレベル言語がプロセッサアーキテクチャの仕様にコンパイルされなければならないのと同じように、JavaScriptはJavaScriptが期待するもののために各ブラウザエンジンの仕様にマッチしなければなりません.
JavaScriptの難しさは、非常に速くそれ自体を繰り返すということです、そして、ウェブ開発者はこれらの反復を拾って、ほぼ速く彼らを使用し始めます.しかし、すべてのブラウザがこのコードを解釈できるわけではありません.機能レベルでは、ポリフィルでこれを解決します.一方で、言語に対する根本的な構造変化は、より劇的な措置を求めている.
ES 6の矢印関数を使用したいと思います.最近ではブラウザがこれらの機能をサポートし始めました.さらに、我々はRSCTを使用しています.そして、それはブラウザーによって確かに解釈できない標準のJavaScript拡張への構文拡張子を利用します.バベル.
バベルは、ローダとしてあなたのwebpack構成に加えられるJavaScriptトランジスターです.Webpackの展開にBabelを動かすことによって、Web開発者は、フロントエンドの開発において我々が対処する絶えず変化する標準をより受動的に維持することができます.
機能のアプリケーションを達成するためにこれらの要件のすべてを使用すると、なぜ正確な理由を作成することができます反応アプリを作成するので、魅力的です.しかし、最終的に、我々はカーテンを引き戻して、レバーを引っ張っている小さい男性で良い長い観察をする必要があります.

依存関係の理解

それで、あなたはディレクトリを作成して、npm initをしました、そして、あなたは次に何を知っていたいです.
反応アプリケーションのトラブルは、彼らはかなり明確にクライアントに提供するには大きすぎるということです.大規模なCSSファイルの間には、JavaScriptの行の数千との間には、すべてのことを言及しないで20の異なるファイルとして提供されている.Webpackを入力します.

Webpackは複雑な獣であり、率直に記事を完全に自分自身に値する.これはモジュールバンドルと呼ばれます.
それはあなたのプロジェクトの依存グラフを構築し、ローダの数に依存してこれを行います.簡単に言えば、Webpackはそれが構築された依存グラフを横切って、その設定ファイルで定義されたそのローダの1つに対して遭遇する各ファイルを解決しようとします.そうすることができないなら、それはランタイムエラーを上げます.それ以外の場合は、バンドルを生成し、マニフェストファイルを持つブートストラップスクリプトの形式で出力を書き込みます(JavaのMavenに似ています).このマニフェストファイルでは、ブラウザで実行する方法を説明します.
Webpackをインストールする

npm install webpack

とWebpack CLI

npm install webpack-cli --save-dev

パスをインストールします.これは、設定ファイルが大きくなると、よりクリーンな設定ファイルを作成します.

npm install path

さて、あなたのパッケージを開きます.JSONプロジェクトをビルドできるスクリプトを追加します.

"scripts": {
    "build": "webpack --mode production"
}

次に、Webpack設定ファイルを作成しましょう.これは魔法が起こるところです.

const webpack = require('webpack');
const path = require('path');

module.exports = {  
    entry: path.join(__dirname, 'app', 'index.js'),  
    output: {
        path: path.join(__dirname, 'build'),
        publicPath: '/',
        filename: 'bundle.js'
    },
}

これは何ですか.一番上から始めましょう.
エントリは簡単です、それは我々のソースディレクトリです.この場合、私はそれを“app”と名付けました、そして、私の主なエントリポイントはインデックスです.js
次は出力です.Webpackが実行されると、バンドルが作成されます.ビルドディレクトリに置きます.それはあなたの最終的な製品になります.
技術的には、今ではWebpackを実行することができますが、以前に議論したように、以前のブラウザではReactive Developmentで一般的に使われているES 6とJSXの構文を理解できません.
そこで、Babelを私たちのコードを標準のES 5に置き換えるように加えます.

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

Babelも独自の設定ファイルが必要です.ベーベック

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

あなたがそれを単純にしたいならば、これはあなたのパッケージで正しくされることもできます.JSONしかし、あなたがプラグインを追加を開始する場合は注意してください、あなたはbloatの多くを取得するつもりだと編集は悪夢のビットになることができます.
Babelが設定されているので、Webpackはそれを意識しなければなりません.したがって、バベルローダー.WebPackの設定に戻りましょう.これはどのようなファイルの種類をローダを介してBabelに送信するWebPackを教えてくれます.

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      },
    ]
}

これはJavaScriptの私たちをカバーするアプリは地獄のように見えます.WebPackはCSSファイルをネイティブにロードしません.
を作成する反応アプリはかなり良い、huh見て開始?
幸いにも、これは簡単ですし、簡単にあなたのプロジェクトで使用するCSSプリプロセッサの種類を選択することができます.これはプリプロセッサからプリプロセッサまで異なりますが、CSSローダとスタイルローダの2つを常に必要とします.CSSローダがあなたのプリプロセッサ特有のローダ(例えば、あなたのより少ないローダ)から出力をとって、それがCommonJs(ノードで使用される仕様)に出力するように、両方とも等しく名前をつけられません.jsスタイルローダは、これを取り、標準的なJavaScriptからスタイルとして、それをロードします.

npm install less-loader css-loader style-loader

rules: [
    {
        test: /\.less$/,
        use: [
            {
                loader: 'style-loader'
            },
            {
                loader: 'css-loader'
            },
            {
                loader: 'less-loader'
            }
        ]
    }
]

最後に、ローカルでアプリケーションを実行することができます.あなたは、単に生産ビルドを作成することによってこれを行うことができますたびに、それは正確に理想的ではない.代わりに、Webpack devサーバーをインストールします.

npm install webpack-dev-server --save-dev

スクリプトをパッケージに追加します.JSON

"scripts": {
    "start": "webpack-dev-server --mode-development",
    "build": "webpack --mode production",
}

とあなたのwebpackの設定を更新します.

entry: path.join(__dirname, 'app', 'index.js'),  
output: {
    path: path.join(__dirname, 'build'),
    publicPath: '/',
    filename: 'bundle.js'
},
devServer: {
    contentBase: path.join(__dirname, '/'),
},

ContentBaseは、ローカル開発サーバーのエントリポイントとして機能します.WebPack devサーバーは、プロダクションビルドのように独自のディレクトリを作成しません.コードをローカルに変更するたびに更新する必要があります.

ラッピング

今、あなたはより多くのことができますし、一度これをしたことを行う必要があります.これを読んで、WebPackがどのようにしてインストールするか、どのように設定するか、どのようにBabelを追加するか、そしてWebpack Dev Serverが機能している開発環境についての一般的な考えを持つべきです.
あなたはここからあなたの反応成分を作成するために行くでしょうが、また、あなた自身のパッケージを追加し始めるでしょう- eslint、反応ルータ、反応reduxなど.
より興味深い読書のために、反応とウェブパックに関するコメントは、私に続いています.またはIdempotency in API Designまたはのような私の他のポストをチェックしてください.