webpackでbabel-loaderを使う方法を紹介

こんにちは！
個人開発者の南です。

今回は、babel-loaderについて紹介していきます。

babel-loaderのインストールについて

今回は、下記の３つをインストールしていきます。

・babel-loader
・babel-core
・babel-preset

babel-loaderのインストール

まずは「babel-loader」をインストールしていきます。

babel-loaderをインストールするには、下記コマンドをターミナルで打ち込みます。

実際に上記のコマンドを入力してから、しばらくすると色々と表示されてインストールが完了します。

インストールができたら、下記のように「package.json」にもインストールしたものが追加されます。

ちなみに、今回はそれぞれ下記のバージョンを使用しています。

・「babel-loader version 8.0.5」

babel-coreのインストール

次に、「babel-core」のインストールをしていきます。

babel-coreは「babel-loader」を使う時に必要な機能が詰まっているモジュールです。

babel-coreをインストールするには、下記コマンドをターミナルで打ち込みます。

ちなみに、今回はそれぞれ下記のバージョンを使用しています。

・「bable/core version 7.4.4」

babel-presetのインストール

最後に「babel-preset」のインストールをしていきます。

babel-presetは、サポートするブラウザに対応するJavaScriptをコンパイルする際に、babelの内部処理で使うプラグインなどの判断を自動でしてくれるものです。

つまり、このブラウザはどのバージョンのbabel-pluginを使えばいい？っと言った質問について、自動で答えてくれるような役割をしています。

babel-presetをインストールするには、下記コマンドをターミナルで打ち込みます。

上記のコマンドを入力すると、色々と表示されます。

ちなみに、今回はそれぞれ下記のバージョンを使用しています。

・「babel/preset-env version 7.4.4」

webpackの設定ファイルの書き込み

babel-loaderのインストールができたら、今度はwebpackの設定ファイルにbabel-loaderを使えるように反映していきます。

「webpack.conifg.js」を開いて、下記のコードを追加しましょう。

書き込みをすると「webpack.conifg.js」の内容にもよりますが、だいたい下記のような感じになると思います。

babel-presetの設定ファイルの作成

「webpack.config.js」のファイルに書き込みができたら、次は「.babelrc」ファイルを作成して、実際にコンパイルされるようにします。

ソースのトップディレクトリに「.babelrc」という名前でファイルを作成します。

ファイルが作成できたら、中に下記のようにコードを書きます。

実際に書き込むと下記のようになると思います。

実際の動作確認

設定ファイルの書き込みができたら、実際の動作を確認してみましょう。

webpackでコンパイルするjsファイルを作成して、中身を下記のようにします。

jsファイルの作成ができたら、作成したjsファイルに対してコンパイルをかけます。

「package.json」ファイルの構成にもよりますが、下記のコマンドを入力すればコンパイルされると思います。

ちなみに、コマンドを入力する場合はターミナルでトップディレクトリまで移動してから、入力します。

コンパイルされた、ファイルを確認すると下記のようになっていると思います。

これでbabel-loaderを使ってのコンパイルは完了です。

まとめ

今回は、webpackにbabel-loaderをインストールして、最新式のJavaScriptファイルを反映する方法を紹介しました。

VueJsやReactなどを使う時に、出てくるセットアップなので、ぜひ活用してみてください。

この記事があなたの役に立てれば嬉しいです。