前回、webpackの最小構成の設定をし、実行しました。
今回は、webpackを一層便利に利用するため、Babelを導入してみようと思います。
Babelについて
webpackとセットで使用するツールにBabelというものがあります。
CSSとかでも、「プレフィックスを使用しないと、このブラウザでは正常に動作しない！」なんてことがあるかと思いますが、JSでも同様です。
ブラウザによる隔たりを解消するためのツールですね。
インストール
webpackにてBabelを使用するためには、Babel-loaderというプラグインをインストールします。
npm i -D babel-loader
これでwebpackとBabelが繋がりました。
ただ、肝心のBabel本体がありませんので、本体をインストールします。
※今回は、既にWebpackとBabelの導線はありますので、実際にBabelに書き換えるプログラムだけで十分です。
そのため、Babelの書き換え部分だけを抜き出したプログラムをインストールしています。
npm i -D @babel/core
設定
ここまででインストールは完了しましたので、実際に利用できるようにしてみましょう。
まずwebpack.config.jsのmodule.exportsメソッドに、moduleプロパティを追加します。
module.exports = {
entry: './src/js/index.js',
module: {
}
}
ルールの定義
次にどのファイルに対し、Babelを適用するのかを設定します。
先ほど追加したmodule内に、rulesプロパティを追加し、そこに「どのようなファイルに」、「どのローダーを適用するのか」をルール付けしていきます。
module.exports = {
entry: './src/js/index.js',
module: {
rules: [
]
}
}
対象ファイルの設定
「どのようなファイルに」の部分は、testプロパティを追加して設定します。
module.exports = {
entry: './src/js/index.js',
module: {
rules: [
{
test: /\.js$/
}
]
}
}
このような感じですね。
test: /\.js$/
肝心の「どのようなファイルに」の部分は、JSファイルに対してとしています。
正規表現を用いていますが、/ /で囲んでいる部分が正規表現のエリアで、ポイントとなるであろう\は.を正規表現としての.ではなく、文字として扱って欲しいので、\.とし、これは文字だよとしています。
また、$は末尾であることを表しています。つまり拡張子が.jsであるファイルを対象にということを表しています。
（正規表現部分の説明が拙くて、すみません。この部分につきましては、他のドキュメントの方が詳しく載っているかと思いますので、そちらを参照ください。）
ローダーの設定
ここまでで、「jsファイルに対して」という設定ができました。
そのjsファイルに対して、どのローダーを適用するのかを設定します。
その設定には、useプロパティを追加して行います。
module.exports = {
entry: './src/js/index.js',
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
}
]
}
}
これで完了、といきたいところですが、もう少し手続きが必要です。
変換設定
書き換えるBabelのプログラムも、webpackとの連結も完了したのですが、実際にどういう書き換えを行うのかという部分が抜けています。
この後は、その変換設定を行います。
インストール
必要な変換設定ファイルをインストールします。
npm i -D @babel/preset-env
設定
次に、インストールした設定ファイルを適用します。
先ほどまでは、useプロパティに使用するローダーを設定していましたが、オブジェクトに変更し、そこに使用するローダーと使用するプリセットを設定します。
module.exports = {
entry: './src/js/index.js',
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
これでJSファイルをIEにも対応したES5に変換し、結合できるようになりました。
次は、ライブラリをimportしたりしてみようと思います。