Reactアプリケーションのバンドラーとして小包を使用します

Asset Managementの町で唯一のゲームではありません。 Parcelは説得力のある代替品を提供し、ゼロ構成で束ねた合理化された資産を提供します。大規模なセットアップコードを要求する他のバンドラーとは異なり、Parcelのシンプルさは大きな利点です。その速度も注目に値し、より複雑なバンドラーと比較して、大幅に速いビルド時間にマルチコア処理を活用します。

小包の主な機能と利点は次のとおりです。

• 動的インポートを介した効率的なコード分割。
• HTML、CSS、JavaScriptを含むさまざまなファイルタイプの汎用性の高い資産処理。
• 一定のページのリフレッシュなしの迅速な開発のためのホットモジュール交換（HMR）。
• デバッグを簡単にするために、コンソールで強調表示されます。
• 開発と生産の設定を管理するための環境変数のサポート。
• 不必要なステップを排除することにより、より高速なビルド用に最適化された生産モード。

この記事では、Parcelを使用してReactプロジェクトを構築する方法を示し、Reactアプリの作成に代わるものを紹介します。反応開発への別のアプローチを探りましょう。

プロジェクトのセットアップ

1. プロジェクトディレクトリの作成：

 mkdir csstricks-react-parcel && cd $ _

2. package.jsonを初期化： NPMまたはYARNのいずれかを使用します。

 ＃npm
npm init -y

＃Yarn（このチュートリアルで使用）
糸init -y

3. 依存関係のインストール：小包とバベルをローカルにインストールします。

ヤーンは、小包バンドラーのバベルプレゼット-ENVバベルプレセット反応 -  devを追加します
YarnはReact-Domを追加します

4. Babelを構成：次のコンテンツで.babelrcファイルを作成します。

 {
  「プリセット」：["env"、 "React"]
}

5. index.js （アプリコンポーネント）を作成します。

 「React」からのImport React;
「React-dom」からReactdomをインポートします。

クラスアプリはReact.comPonentを拡張します{
  与える（） {
    戻る （
      <react.fragment><h2 id="こんにちは">こんにちは！</h2></react.fragment>
    ）;
  }
}

const rootelement = document.getElementById（ "root"）;
Reactdom.Render（<app></app> 、rootelement）;

6. index.html （ src directory）を作成します。

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>小包反応の例</title>


  <div id="root"></div>

7. package.jsonを構成する（スクリプトを開始）：

 「スクリプト」：{
  「start」： "node_env =開発小包src/index.html -open"
}

8. アプリケーションを実行します：ターミナルでyarn startを実行します。アプリはhttp://localhost:1234/でブラウザで起動する必要があります。

SASSでスタイリング

小包にはPostCSSが含まれています。 SASSを使用するには、必要なパッケージをインストールします。

 YARN ADD -DEV NODE-SASS AUTOPREFIXER

package.jsonのpostcssセクション（必要に応じて）を構成します。

 「postcss」：{
  「モジュール」：FALSE、
  「プラグイン」：{
    「autoprefixer」：{
      「ブラウザ」：["> 1％"、 "last 4バージョン"、 "firefox esr"、 "not ie <h3 id="生産ビルド">生産ビルド</h3><p>プロダクションビルド用の<code>package.json</code>を構成します：</p><pre class="brush:php;toolbar:false"> 「スクリプト」：{
  "start"： "node_env =開発小包src/index.html -open"、
  "build"： "node_env = production parcel build dist/ index.html  -  public-url ./"
}

yarn buildを実行して、 distフォルダーに生産対応ビルドを作成します。 --out-dir 、 --no-minify 、および--no-cacheなどのオプションは、さらにカスタマイズされています。

Crap（ReactApp Parcelを作成）

React App Parcel（Crap）を作成すると、プロジェクトのセットアップが簡素化されます。

 npx create-react-app-parcel my-app
CD my-app
糸のスタート

結論

小包の使いやすさと最適化されたビルド時間により、次のReactプロジェクトの強力な候補者になります。その人気の高まり（30,000 Github Stars）は、コミュニティの受け入れを語っています。

リソース

• 小包の例
• 素晴らしい小包

このチュートリアルのソースコードのGitHubリポジトリ（提供されるリンク）。

以上がReactアプリケーションのバンドラーとして小包を使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。