web-dev-qa-db-ja.com

Webpack / Babelとreact-scriptsの違い

最近、私はウェブパックと反応スクリプトの作業を開始しました。それらを使用する利点と欠点、およびそれらが互いにどのように異なるかを知りたいです。

webpackbabelreact-scripts
36
user3335796

基本的に、それらは異なる目的に役立ち、通常一緒に表示されます。それらが何のために設計されているかを説明します。

バベル

バベルはトランスパイラーです。あらゆる種類のハイバージョンECMAScript（ECMAScriptだけでなく、理解しやすい）をES5に変換できます。ES5は、ブラウザー（特に古いバージョン）でより広くサポートされています。主な仕事は、サポートされていない、または最先端の言語機能をES5に変えることです。

Webpack

Webpackは、とりわけ、依存関係アナライザーおよびモジュールバンドラーです。たとえば、モジュールAが依存関係としてBを必要とし、モジュールBが依存関係としてCを必要とする場合、webpackはC-> B-> Aのような依存関係マップを生成します。実際にはこれよりはるかに複雑ですが、コンセプトは、Webpackが複雑な依存関係を持つモジュールをバンドルにパッケージ化することです。 webpackとbabelの関係について：webpackは依存関係を処理するとき、webpackはjavascriptの上で動作するため、すべてをjavascriptに変換する必要があります。その結果、異なるローダーを使用して、さまざまなタイプのリソース/コードをjavascriptに変換します。 ES6またはES7の機能が必要な場合、babel-loaderを使用してこれを実現します。

反応スクリプト

反応ベースのプロジェクトを開始するとき、ビルド環境のセットアップは困難で時間のかかる作業です。これを支援するために、Reactの開発者は、ほとんどの人が平均Reactアプリに必要とする基本セットアップの多くを含むreact-scriptsというnpmパッケージを作成しました。 Babelとwebpackは react-scriptsに依存関係として含まれます

56
Oboo Chin

WebPackとreact-scriptsは少し異なります。

Webpackは、Webアプリケーションのバンドルをコンパイルするために使用されます。これは自由形式であり、エントリポイントを持つことができます。さらに、webpackはbabel-presetsとともに使用されます。これにより、比較的古いブラウザーで最新のES6 +構成を使用できます。また、webpackは、1つのファイル内のアセンブリに依存するnode_moduleを担当し、場合によっては圧縮して最適化します。 webpackの哲学の詳細については、こちらをご覧ください。 https://webpack.js.org/concepts/

React-scriptsは、カスタマイズされたwebpack-dev-serverを起動するためのスターターキットであり、Reactプレイグラウンドに提供されているボイラープレートで動作するように構成されています。それは単なるデモ目的のものです。最近のほとんどのWebライブラリには独自のスターターキットがあり、サーバー側のライブラリも含まれています。 https://github.com/reimagined/resolve/tree/master/packages/resolve-scripts など

5
Vladislav Ihost