BabelとWebpackを使用してES6プロジェクトを設定します

この記事では、babelとwebpackを使用して最新のJavaScript（Webブラウザーで実行）を処理するためのビルドセットアップを作成することを検討します。 これは、特に最新のJavaScriptコードが、それ以外の場合よりも幅広いブラウザと互換性があることを確認するために必要です。

JavaScriptは、ほとんどのWeb関連テクノロジーと同様に、常に進化しています。古き良き時代には、いくつかの<script>タグをページにドロップしたり、jqueryといくつかのプラグインを含めたり、行ったりすることができます。 </script>

しかし、ES6の導入以来、事態は次第に複雑になりました。新しい言語機能のブラウザサポートはしばしばパッチがあり、JavaScriptアプリがより野心的になるにつれて、開発者はモジュールを使用してコードを整理し始めています。これは、今日モダンなJavaScriptを書いている場合、プロセスにビルドステップを導入する必要があることを意味します。 下のリンクからわかるように、ES6からES5に変換すると、サポートできるブラウザの数が劇的に増加します。

es6互換性

es5互換性

ビルドシステムの目的は、コードをブラウザーと生産に対応させるために必要なワークフローを自動化することです。これには、異なる標準にコードを透過する、SASSへのコンパイルファイル、バンドルファイル、コードの模倣と圧縮などの手順が含まれる場合があります。これらが一貫して再現可能であることを確認するには、単一のコマンドから既知のシーケンスのステップを開始するためにビルドシステムが必要です。

キーテイクアウト

BabelとWebpackを利用して最新のJavaScriptプロジェクトをセットアップし、ES6コードがより広範なWebブラウザーに互換性があることを確認します。
• Package.jsonファイルを使用してプロジェクト構造を作成し、ソースと導入されたJavaScriptのSRCとパブリックディレクトリにコードを整理します。

babelをインストールしてES6をES5に透過し、特定のブラウザバージョンをターゲットにし、NPMスクリプトを使用してこのプロセスを自動化します。 IE11のような古いブラウザとの互換性は限られたままですが、JavaScriptコードを効果的に管理およびモジュール化するためのES6モジュールを実装してください。

Webパックを統合してJavaScriptモジュールを単一または複数のファイルにバンドルし、サーバー要求を削減し、負荷時間を最適化します。

Webpackの監視およびDev-Server機能を使用して開発ワークフローを強化して、コードの変更時にブラウザを自動的に再構築および更新します。

前提条件

• フォローするには、node.jsとnpmの両方をインストールする必要があります（一緒にパッケージ化されます）。 NVMなどのバージョンマネージャーを使用してノードのインストールを管理することをお勧めします（方法は次のとおりです）。NPMを把握するのに役立つ場合は、SitePointの初心者向けのNPMチュートリアルをチェックしてください。

  セットアップ

  コンピューターのどこかにルートフォルダーを作成し、ターミナル/コマンドラインからナビゲートします。これはあなたのフォルダーになります。

  これを使用してPackage.jsonファイルを作成します

  <span>npm init -y
  </span>

  注：-yフラグは、デフォルト設定でファイルを作成し、コマンドラインから通常の詳細を完了する必要がないことを意味します。必要に応じて、後でコードエディターで変更できます。 フォルダー内で。 SRC/JSフォルダーは、未処理のソースコードを配置する場所になり、パブリックフォルダーはトランスピールコードが終了する場所になります。 babel での移動

  自分自身を進めるために、ES6をES5に透過する機能を提供するBabel-Cliと、Transpiled Codeで特定のブラウザーバージョンをターゲットにすることができるBabel-PreSet-ENVを提供するBabel-Cliをインストールします。 >
  ここで、Package.json：

  に次のように表示されます

  package.jsonファイルに参加している間、スクリプトセクションを変更して次のように読みましょう。

  <span>npm install babel-cli babel-preset-env --save-dev
  </span>

  これにより、毎回端末から直接ではなく、スクリプトを介してバベルを呼び出すことができます。 NPMスクリプトとそれらに何ができるかについて詳しく知りたい場合は、このSitePointチュートリアルをご覧ください。

  最後に、Babelがそのことをしているかどうかをテストする前に、.babelrc構成ファイルを作成する必要があります。これは、Babel-Preset-ENVパッケージがそのトランスファイルパラメーターについて言及するものです。

  .babelrcと呼ばれるディレクトリに新しいファイルを作成し、以下を貼り付けます。

  <span>"devDependencies": {
  </span>  <span>"babel-cli": "^6.26.0",
  </span>  <span>"babel-preset-env": "^1.6.1"
  </span><span>}
  </span>

  これにより、各ブラウザの最後の2つのバージョンに加えて、V7以降のSafariを輸送するようにBabelをセットアップします。他のオプションは、サポートする必要があるブラウザに応じて利用できます。

  それを保存すると、ES6を使用するサンプルJavaScriptファイルで物事をテストできるようになりました。この記事の目的のために、私はLeftPadのコピーを変更して、テンプレートリテラル、矢印関数、const、およびlet。

  <span>"scripts": {
  </span>  <span>"build": "babel src -d public"
  </span><span>},
  </span>

  すべてが意図されている場合、パブリックフォルダーにJS/reptpad.jsという新しいファイルが見つかるはずです。それを開くと、ES6の構文が含まれていないことがわかり、次のようになります。

  ES6モジュールを使用してコードを整理する

  ES6モジュールは、別のJavaScriptファイルを利用できるようにする機能、オブジェクト、またはプリミティブ値を含むJavaScriptファイルです。 1つからエクスポートし、もう一方にインポートします。真剣な最新のJavaScriptプロジェクトは、モジュールの使用を検討する必要があります。コードを自己完結型ユニットに分割し、それにより物事が容易になります。名前空間汚染を避けるのに役立ちます。そして、彼らはあなたのコードをよりポータブルで再利用可能にするのに役立ちます。ES6構文の大部分は最新のブラウザで広く利用可能ですが、これはまだモジュールの場合はそうではありません。執筆時点では、Chrome、Safari（最新のiOSバージョンを含む）、Edgeで利用できます。 FirefoxとOperaの旗の後ろに隠れています。そして、IE11やほとんどのモバイルデバイスでは利用できません（そしておそらく決してそうなることはありません）。

  次のセクションでは、モジュールをビルドセットアップに統合する方法について説明します。

  export
  エクスポートキーワードは、ES6モジュールを他のファイルで使用できるようにすることを可能にするものであり、そうするための2つのオプションが与えられます。名前とデフォルトです。指定されたエクスポートを使用すると、モジュールごとに複数のエクスポートを行うことができ、デフォルトのエクスポートを使用すると、モジュールごとに1つしかありません。名前付きエクスポートは、いくつかの値をエクスポートする必要がある場合に特に役立ちます。たとえば、アプリ内のさまざまな場所で利用できるようにする必要がある多数のユーティリティ関数を含むモジュールがある場合があります。

  左パッドファイルをモジュールに変えてみましょう。次に、2番目のファイルで要求できます。

  名前

  という名前

  名前付きエクスポートを作成するには、左パッドファイルの下部に次のことを追加します。

  「Strictを使用する」を削除することもできます。モジュールがデフォルトで厳密なモードで実行されるため、ファイルの上部からの宣言。

  defult export

  <span>npm init -y
  </span>

  leftPadファイルにエクスポートされる単一の関数のみがあるため、実際にはエクスポートデフォルトを使用するための良い候補者である可能性があります：

  繰り返しますが、「Strictを使用する」を削除できます。ファイルの上部からの宣言。

  Import

  <span>npm install babel-cli babel-preset-env --save-dev
  </span>

  エクスポートされたモジュールを使用するには、それらをファイル（モジュール）にインポートする必要があります。

  エクスポートデフォルトオプションの場合、エクスポートされたモジュールは、選択したい名前の下でインポートできます。たとえば、leftPadモジュールはそのようにインポートできます。

  またはそれは別の名前としてインポートすることができます：

  機能的には、両方ともまったく同じように機能しますが、エクスポートされたのと同じ名前を使用すること、またはインポートを理解できるもののいずれかを使用することは明らかに理にかなっています。受信モジュールに存在します。
  指定されたエクスポートオプションの場合、エクスポートと同じ名前を使用してモジュールをインポートする必要があります。モジュールの例では、エクスポートデフォルトの構文で使用した方法と同様の方法でインポートしますが、この場合、インポートされた名前をCurlyブレースでラップする必要があります。

  <span>"devDependencies": {
  </span>  <span>"babel-cli": "^6.26.0",
  </span>  <span>"babel-preset-env": "^1.6.1"
  </span><span>}
  </span>

  ブレースは指名された輸出で必須であり、使用されていないと失敗します。

  <span>"scripts": {
  </span>  <span>"build": "babel src -d public"
  </span><span>},
  </span>

  必要に応じてインポート上の名前付きエクスポートの名前を変更することができます。そのためには、[Module]を[PATH]構文として使用して構文を少し変更する必要があります。エクスポートと同様に、これを行うにはさまざまな方法があります。これらはすべて、MDNインポートページで詳しく説明されています。

  <span>npm init -y
  </span>

  繰り返しますが、名前の変更は少し無意味ですが、それはそれらを何でも変更できるという点を示しています。もちろん、果物ベースのレシピを準備するためのルーチンを書いている場合を除き、常に良い命名慣行を維持する必要があります。 エクスポートされたモジュールの消費

  エクスポートされた左パッドモジュールを使用するために、SRC/JSフォルダーに次のIndex.JSファイルを作成しました。ここでは、シリアル番号の配列をループし、それらをゼロでプレフィックスして8文字の文字列にします。その後、これを利用して、HTMLページの順序付けられたリスト要素に投稿します。この例では、デフォルトのエクスポート構文を使用していることに注意してください：

  <span>npm install babel-cli babel-preset-env --save-dev
  </span>

  以前に行ったように、ディレクトリからビルドスクリプトを実行します：

  <span>"devDependencies": {
  </span>  <span>"babel-cli": "^6.26.0",
  </span>  <span>"babel-preset-env": "^1.6.1"
  </span><span>}
  </span>

  Babelは、public/jsディレクトリにindex.jsファイルを作成します。 reptPad.jsファイルと同様に、BabelがすべてのES6構文を交換し、ES5構文のみを残していることがわかります。また、ES6モジュールの構文をノードベースのモジュールに変換したことに気付くかもしれません。つまり、コマンドラインから実行できることを意味します。
  端末は、ゼロが付いた文字列の配列をログアウトして、8文字すべての長さにする必要があります。それが終わったので、ウェブパックを見る時が来ました。

  <span>"scripts": {
  </span>  <span>"build": "babel src -d public"
  </span><span>},
  </span>

  webpackを導入し、それをbabel

  と統合します 前述のように、ES6モジュールにより、JavaScript開発者はコードを管理可能なチャンクに分割することができますが、その結果、それらのチャンクをリクエストブラウザに提供する必要があり、潜在的に多数のHTTPリクエストを追加する可能性があります。サーバー - 私たちが本当に避けようとしているべきもの。これは、Webpackが入ってくる場所です

  Webpackはモジュールバンドラーです。その主な目的は、すべての依存関係を追跡してアプリケーションを処理し、ブラウザで実行できる1つまたは複数のバンドルにパッケージ化することです。ただし、構成方法によっては、それ以上のものになる可能性があります。

  WebPack構成は、4つの重要なコンポーネントを中心に基づいています
  エントリポイント
  出力場所
  ローダー
  • プラグイン
  エントリ：これにより、Webpackがその依存関係を識別できる場所からアプリケーションの開始点が保持されます。
  • 出力：これは、処理されたバンドルを保存する場所を指定します。
  ローダー：これらは、1つのものを入力として変換し、他のものを出力として生成する方法です。これらは、Webpackの機能を拡張してJavaScriptファイルだけでなく、それらを有効なモジュールに変換するために使用できます。
  • プラグイン：これらは、削除、糸くず、最適化など、バンドルを超えてWebpackの機能を他のタスクに拡張するために使用されます。
  webpackをインストールするには、ディレクトリから以下を実行してください：

  <span>npm init -y
  </span>

  これにより、Webpackをプロジェクトにローカルにインストールし、WebPack-Cliの追加を通じてコマンドラインからWebパックを実行する機能も提供します。これで、Webpackがpackage.jsonファイルにリストされているようになりました。そのファイルに参加している間、次のようにスクリプトセクションを変更してください。これにより、Babelの代わりに直接Webパックを使用することがわかります。

  <span>npm install babel-cli babel-preset-env --save-dev
  </span>

  ご覧のとおり、このスクリプトはwebpack.config.jsファイルを呼び出しているので、次のコンテンツでディレクトリにそれを作成しましょう。
  これは多かれ少なかれ、Webpackで必要な最も単純な構成ファイルです。前述のエントリ

  <span>"devDependencies": {
  </span>  <span>"babel-cli": "^6.26.0",
  </span>  <span>"babel-preset-env": "^1.6.1"
  </span><span>}
  </span>

  entry

  and出力セクションを使用していることがわかります（これらの単独で機能する可能性があります）が、モード：「開発」設定。 webpackには、「開発」または「生産」モードのいずれかを使用するオプションがあります。設定モード：「開発」はビルド速度とデバッグのために最適化されますが、モード：「生産」は、実行時および出力ファイルサイズでの実行速度を最適化します。 Tobias Koppersの記事「Webpack 4：Mode and Optimization」には、デフォルト設定を超えて構成する方法について詳しく読みたい場合は、良い説明があります。 次に、パブリック/JSフォルダーからファイルを削除します。次に、これを再実行します：

  単一の./public/bundle.jsファイルが含まれていることがわかります。ただし、新しいファイルを開き、始めた2つのファイルはかなり異なるように見えます。これは、index.jsコードを含むファイルのセクションです。オリジナルから非常に重く変更されていますが、変数名を選択できます。
  ノードpublic/js/bundle.jsをフォルダーから実行すると、以前と同じ結果が得られることがわかります。

  <span>"scripts": {
  </span>  <span>"build": "babel src -d public"
  </span><span>},
  </span>

  spiling

  前述のように、

  <span>{
  </span>  <span>"presets": [
  </span>    <span>[
  </span>      <span>"env",
  </span>      <span>{
  </span>        <span>"targets": {
  </span>          <span>"browsers": ["last 2 versions", "safari >= 7"]
  </span>        <span>}
  </span>      <span>}
  </span>    <span>]
  </span>  <span>]
  </span><span>}
  </span>

  ローダー

  では、あるものを何か他のものに変換することができます。この場合、ES6がES5に変換されたいと考えています。そのためには、さらにいくつかのパッケージが必要になります：

  それらを利用するには、webpack.config.jsには、

  output

  セクションの後に追加するモジュールセクションが必要です。 これは、Regexステートメントを使用して、babel-roaderで導入されるJavaScriptファイルを識別しますが、それからnode_modulesフォルダー内のすべてを除外します。最後に、Babel-Roaderは、以前にインストールされたBabel-Preset-ENVパッケージを使用して、.babelrcファイルに設定されたトランスパイルパラメーターを確立するように指示されています。

  それが完了すると、これを再実行できます：

  <span>"use strict";
  </span>
  <span>function leftPad(str<span>, len, ch</span>) {
  </span>  <span>const cache = [
  </span>    <span>"",
  </span>    <span>" ",
  </span>    <span>"  ",
  </span>    <span>"   ",
  </span>    <span>"    ",
  </span>    <span>"     ",
  </span>    <span>"      ",
  </span>    <span>"       ",
  </span>    <span>"        ",
  </span>    <span>"         "
  </span>  <span>];
  </span>  str <span>= str + "";
  </span>  len <span>= len - str.length;
  </span>  <span>if (len <= 0) return str;
  </span>  <span>if (!ch && ch !== 0) ch = " ";
  </span>  ch <span>= ch + "";
  </span>  <span>if (ch === " " && len < 10)
  </span>    <span>return () => {
  </span>      cache<span>[len] + str;
  </span>    <span>};
  </span>  <span>let pad = "";
  </span>  <span>while (true) {
  </span>    <span>if (len & 1) pad += ch;
  </span>    len <span>>>= 1;
  </span>    <span>if (len) ch += ch;
  </span>    <span>else break;
  </span>  <span>}
  </span>  <span>return <span>`<span>${pad}</span><span>${str}</span>`</span>;
  </span><span>}
  </span>

  次に、新しいpublic/js/bundle.jsを確認すると、ES6構文のすべてのトレースがなくなったことがわかりますが、それでも以前と同じ出力を生成します。 ブラウザに持ち込む

  <span>npm run build
  </span>

  機能するWebpackとBabelのセットアップを構築したので、今度はブラウザに行ったことを持ち込む時が来ました。小さなHTMLファイルが必要です。これは、以下のようにフォルダーで作成する必要があります。

  <span>npm init -y
  </span>

  複雑なものはありません。注意すべき主なポイントは、

  要素であり、数字の配列が進行し、<script> </script> closit

以上がBabelとWebpackを使用してES6プロジェクトを設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。