【webpack】babelの設定方法・使い方を解説します

記事内に商品プロモーションを含む場合があります

以上のような疑問の解決記事です。

 

babelとは？

一言で説明すると、ES6の書き方を、ES5に変換するツールのことです。

babel公式サイトには、以下のように記載されています。

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments

【引用】https://babeljs.io/docs/en/

 

訳すとこんな感じ↓

Babelは、現在および古いブラウザまたは環境でECMAScript2015 +コードを下位互換性のあるバージョンのJavaScriptに変換するために主に使用されるツールチェーンです。

 

「少し前の書き方にする」とも言い換えられます。

 

どんな時に使うの？

ブラウザによっては、ES5でしかJavaScriptを読み込めないものがあるので、そのブラウザに対応させたい場合に使用します。

 

 

必須パッケージをインストール

babelを使用するのに必要なパッケージは以下の通り。

 

以前は、それぞれbabel-coreやbabe-preset-envと記載していたようです。

 

インストールする

下記コマンドでインストールします。

npm install --save-dev babel-loader @babel/preset-env@7.9.6 @babel/core@7.9.6

 

※バージョンによる不具合が生じるので、ここでは2つを7.9.6指定してます。

 

 

package.jsonを確認

インストールされたかpackage.jsonを確認します。

{
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.6", //追加
    "@babel/preset-env": "^7.9.6", //追加
    "babel-loader": "^8.2.3", //追加
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.5.1",
    "file-loader": "^6.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.5",
    "node-sass": "^7.0.1",
    "pug-html-loader": "^1.1.5",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

 

新たに3パッケージが追加されました。

 

 

webpack-config.jsに設定を追加する

続いて、webpack-config.jsに設定を追加します。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: `${__dirname}/dist`,
        filename: './js/bundle.js'
    },
    mode: 'development',
    module: {
        rules: [
            //ここから追加
            {
                //拡張子が.jsを検知した時
                test: /\.js/,
                //ただし、node_modules/配下のjsは除外する
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
            },
            //ここまで追加
            {
                test: /\.(css|sass|scss)/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'images/[name].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.pug/,
                use: [
                    {
                        loader: 'html-loader'
                    },
                    {
                        loader: 'pug-html-loader',
                        options: {
                            pretty: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './css/style.css'
        }),
        new HtmlWebpackPlugin({
            template: './src/templates/index.pug',
            filename: 'index.html'
        }),
        new HtmlWebpackPlugin({
            template: './src/templates/menu.pug',
            filename: 'menu.html'
        }),
        new CleanWebpackPlugin()
    ]
}

 

 

webpackを起動

下記コマンドでwebpackを起動します。

npm run build

 

 

ブラウザでsub.jsを確認

この段階では、まだbabelの機能を確認することはできません。

devツールを開いて、sub.jsを確認すると以下のようになっています。

 

ちなみにsub.jsファイルの記述は以下です。

sub.js

export function hello(text) {
    alert(text)
}

 

画像と比較すると分かる通り、関数自体は変わっていません（ES5のまま）

 

sub.js(ES6)

これをES6に書き換えます。

// export function hello(text) {
//     alert(text)
// }

export const hello = (text) => {
    alert(text)
}

 

もしbabelが機能していれば、実行後、ES5の書き方になって出力されるはずです。

 

webpackを起動後、再度ブラウザで確認してみる

下記コマンドでwebpackを起動します。

npm run build

 

 

ブラウザでsub.jsを確認すると・・・

ES5に書き変わっているのが確認できました。

 

 

まとめ

本記事では、「babelの設定方法・使い方を解説します」と題して、以下のことを解説しました。

先述しましたが、ES5の書き方でしか動作しないブラウザもあるので、そのような時にbabelが役立ちます。

必要になった際は、ぜひ使ってみてください。

 

 

参考

• Webpackでウェブサイト制作のHTML/CSS/JSコーディングを一気に効率化する実践講座 (Mac / Win)