2015(略:ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。11など古いブラウザでは動作しないこともあります。トランスパイラとして一番有名なのが「Babel」というツールです。Modules(importやexport文のこと。Modulesと記載)のJSファイルをまとめる機能が提供されていません。ModulesのJSファイルをまとめるモジュールバンドラー(例:webpack、Rollup等)をBabelと合わせて使うのが一般的です。この記事ではトランスパイラのBabelとモジュールバンドラーのwebpackを連携する方法を網羅的に解説します。使い方として次の5種類を解説します。4入門」を参照ください。webpack+Babelの構成を作成しようwebpackとBabelを最小構成で作っていきましょう。npmモジュールのインストールwebpackとBabelなど必要なモジュールをインストールしましょう。Babelは複数のモジュールを組み合わせて使う形式上、「@babel/core」「@babel/preset-env」「babel-loader」と3種類を最低限インストールする必要があります。「webpack」と「webpack-cli」も指定します。@babel/preset-env※Babel本体のモジュール「@babel/core」「@babel/preset-env」には先頭に「@」があり、webpack用「babel-loader」には「@」がない点にも注意ください。これをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドを記述しておきます。scriptsとdevDependencies以外の情報は省略しています。true}webpackの設定ファイルwebpackの設定ファイルには次のように記述します。rulesの部分でbabel-loaderを指定しているのがポイントです。Babelはプリセットの設定に応じてECMAScriptのバージョンを下位にトランスパイルします。tables」に基づきターゲットブラウザを指定できたりとさまざまな機能が提供されています。10だけでよければ、ES5まで落として変換する必要はなく、ES2015(ES6)をターゲットにすれば良いということになります。興味がある方はドキュメントを参考ください。以上で設定は完了です。buildコマンドを入力すると、srcフォルダーに配置したJSファイルがトランスパイルされ、distフォルダーにmain.jsファイルが出力されます。ここまでの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。サンプルのソースファイル(tutorial-babel)サンプルのHTMLを開く(tutorial-babel)webpack+Babel+jQueryの構成を作成しようjQueryは言わずと知れた汎用的なJSライブラリです。webpackやBabelに興味のあるフロントエンドエンジニアであれば、「いまどき、jQueryを使いたくない」という方もいるかもしれません。現場では使わざるを得ない状況の方も多いはずです。Togetter」でも、不要論の是非について話題になりましたね。ここでは、npmモジュールのjQueryをwebpackで取り込む方法について紹介します。npmモジュールのインストール必要なモジュールをインストールしましょう。上述のwebpack+Babelの構成と同じです。@babel/preset-env実行用の「jQuery」モジュールもインストールしましょう。こちらは実行ファイルに含まれるモジュールとして利用したいので、コマンドオプション「-D」は省いてます。「-D」を省くとdependenciesにモジュールが記載されます。jqueryこれをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドを記述しておきます。scriptsとdevDependencies、dependencies以外の情報は省略しています。true}webpackの設定ファイルwebpackの設定ファイルには次のように記述します。rulesの部分でbabel-loaderを指定します。}};以上で設定は完了です。buildコマンドを入力すると、srcフォルダーに配置したJSファイルがトランスパイルされ、distフォルダーにmain.jsファイルが出力されます。ここまでの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。サンプルのソースファイル(tutorial-babel-jquery)サンプルのHTMLを開く(tutorial-babel-jquery)jQueryのサンプルの実行結果は次となります。webpack+Babel+Reactの構成を作成しようReactはウェブアプリケーションの開発に役立つ人気のJSライブラリです。16を例に、npmモジュールをwebpackで取り込む方法について学んでいきましょう。npmモジュールのインストール必要なモジュールをインストールしましょう。上述のwebpack+Babelの構成に加えて、トランスパイル用に「@babel/preset-react」が必要となります。@babel/preset-react実行用の「react」と「react-dom」もインストールしましょう。react-domこれをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドを記述しておきます。scriptsとdevDependencies、dependencies以外の情報は省略しています。true}webpackの設定ファイルwebpackの設定ファイルには次のように記述します。rulesの部分でbabel-loaderを指定します。オプションのプリセットには@babel/preset-envの指定だけでなく、@babel/reactを記述するのがポイントです。これによって、JSXと呼ばれるReact特有のシンタックス(JavaScriptの中にDOM要素を記述する方法)を解釈できるようになります。}};以上で設定は完了です。buildコマンドを入力すると、srcフォルダーに配置したJSファイルがトランスパイルされ、distフォルダーにmain.jsファイルが出力されます。ここまでの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。サンプルのソースファイル(tutorial-babel-react)サンプルのHTMLを開く(tutorial-babel-react)サンプルの実行結果は次となります。Reactの初期設定を簡単にするツール「create-react-app」からReactを始める人も多いと思います。create-react-appのビルドでは、内部的にwebpackとBabelが使われています。webpack+Babel+Three.jsの構成を作成しようThree.jsは3D表現の制作に役立つ人気のJSライブラリです。使い方は記事「Three.js入門」で説明したことがあります。Three.jsを例に、npmモジュールをwebpackで取り込む汎用的な方法について学んでいきましょう。npmモジュールのインストール必要なモジュールをインストールしましょう。上述のwebpack+Babelの構成と同じです。@babel/preset-env実行用の「three」モジュールもインストールしましょう。こちらは実行ファイルに含まれるモジュールとして利用したいので、コマンドオプション「-D」を省いています。dependenciesにモジュールが記載されます。threeこれをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドを記述しておきます。scriptsとdevDependencies、dependencies以外の情報は省略しています。true}webpackの設定ファイルwebpackの設定ファイルには次のように記述します。rulesの部分でbabel-loaderを指定し、excludeでnode_modulesフォルダーを除外します。}};以上で設定は完了です。buildコマンドを入力すると、srcフォルダーに配置したJSファイルがトランスパイルされ、distフォルダーにmain.jsファイルが出力されます。ここまでの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。サンプルのソースファイル(tutorial-babel-three)サンプルのHTMLを開く(tutorial-babel-three)サンプルの実行結果は次となります。▲Vue.js公式サイトVue.jsはReactやAngularと並んで注目を集めるJSライブラリです。@vue/cliを使うのがもっとも簡単ですが、カスタマイズを目的として自前でビルド環境を用意したい方もいるでしょう。この解説ではwebpack4とBabelとVue.jsを最小構成で作っていきます。Vue.jsはさまざまな記述方法が可能なので、ここで紹介する構成は一例に過ぎません。アンケートで調べたところ、Vue.jsの開発では単一ファイルコンポーネントがもっとも使われているようなので、その構成で解説します。npmモジュールのインストールwebpackとBabelなど必要なモジュールをインストールしましょう。.vueファイルを読み込むために、vue-loaderやvue-template-compilerを入れておきます(必須)。.vueファイルではCSSも扱うので、css-loaderやfile-loaderも必要となります。webpack-cli実行用の「vue」モジュールもインストールしましょう。vueこれをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドを記述しておきます。scriptsとdevDependencies以外の情報は省略しています。true}webpackの設定ファイルwebpackの設定ファイルには次のように記述します。resolveの部分でaliasを指定することや、プラグインVueLoaderPluginを指定することも重要です。拡張子vueやcssに対してもルールを設定し、extensionsの箇所にはvueファイルを登録しておきます。要は設定するところが多いので大変です。]};以上で設定は完了です。buildコマンドを入力すると、srcフォルダーに配置したjsやvueファイルがコンパイルされ、distフォルダーにmain.jsファイルが出力されます。ここまでの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。サンプルのソースファイル(tutorial-babel-vue)サンプルのHTMLを開く(tutorial-babel-vue)Vue.jsのサンプルの実行結果は次となります。2018仕様のJavaScriptをフルに利用するには、さらに設定が必要です。Babelはアロー関数やクラス、letやconstといった新しい構文を下位バージョンに変換しますが、PromiseやArray.includes()といった機能までは変換しません。後者を利用するにはポリフィルを導入する必要があります。ここではBabelが提供する「@babel/polyfill」の組み込み方を解説します。※最新版のBabelでは@babel/polyfillではなく、core-jsを利用する方法を推奨されています。2019年8月現在、core-jsを組み込む方法は注意する点が多くあります(特にIE11で利用可能にするのは難しい)。本記事では@babel/polyfillでの方法でしばらく継続して掲載します。npmモジュールのインストール必要なモジュールをインストールしましょう。今回はポリフィルとして「@babel/polyfill」もインストールします。@babel/polyfillこれをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドを記述しておきます。scriptsとdevDependencies、dependencies以外の情報は省略しています。true}webpackの設定ファイルwebpackの設定ファイルには次のように記述します。}};エントリーポイントentryのJavaScriptファイルには、ポリフィルを取り込むように記載しましょう。デフォルトでは「src/index.js]ファイルの先頭に記載します。"@babel/polyfill";以上で設定は完了です。buildコマンドを入力すると、srcフォルダーに配置したJSファイルがトランスパイルされ、distフォルダーにmain.jsファイルが出力されます。ここまでの手順をサンプルファイルとしてGitHubで公開しています。2018(ES9)までのさまざまなAPIを試しています。変換前後の結果を見比べてみるとおもしろいです。2)に変換されています(次の図版はクリックで拡大できます)。ES2017のpadEnd()メソッドや、ES2018の非同期イテレーションも動作します。このほかにもサンプルを用意してますこのほかにもサンプルを用意してます。ここまで記事を読み進めて頂いた方であれば、次のリポジトリのソースコードを見れば簡単に導入できるはずです。2015以上の言語仕様が標準で使えるようになってきました。5との付き合いは続きそうです。11対応の需要によって数年は使われるでしょう。モジュールバンドラーの役割は複数のファイルをまとめることです。Modulesはやがて各種ブラウザが対応し利用できるようになっていくでしょう(令和元年5月現在、標準で使えるのはSafariとChromeとEdgeとFirefox)。HTTP/1.1環境下では同時リクエスト数の上限があるため、モジュールバンドラーによってまとめる利点が依然として存在します。npmモジュールのバンドルにも役立つことを考えると、モジュールバンドラーの寿命はトランスパイラよりも長いかもしれません。モジュールバンドラーとしてのwebpackは多機能であるがゆえに設定が複雑です。本記事で紹介した設定は一例に過ぎないので、コピペするだけではなく理解したうえで応用しなけば現場ではまったく役に立ちません。前回の記事「最新版で学ぶwebpack入門」には、JavaScriptの圧縮やソースマップ、webpack-dev-serverなどについて解説しています。令和元年8月14日に内容をメンテナンスしています。