Zenn
🦔

webpackというものを触ってみる - Babel導入

2022/10/16に公開
JavaScript
webpack
フロントエンド
tech

はじめに

前回、webpackを導入してからの続きです。

https://zenn.dev/kuroinu/articles/20221016_webpack1

最近のJsは変化が早く、ブラウザによって対応が異なっていたり、単純にユーザーのブラウザのバージョンが古いとかで、新しい機能を使うとユーザーによっては正しく動かないという事が発生します。
それをできるだけ解消してくれるのがBabelというツールらしいです。
よくあるのがES6からのアロー関数や let const の変数宣言等、対応していないブラウザ(というかIE11)で動作する様にしたいという要望で、読み込んだJsを変換して叶えてくれるそうです。
これをコンパイルとかトランスパイルとか言うそうです。

環境

  • windows10 (wsl2)
  • node(v16.18.0)
  • yarn(1.22.19)

ディレクトリ構成やファイルの内容は前回の最後から引き続きです。

Babelをインストール

とりあえず必要なツールをインストールします。

$ yarn add -D webpack webpack-cli babel-loader @babel/core @babel/preset-env

次に、 webpack.config.js にBabelが働いてくれる様に記述します。

./webpack.config.js
module.exports = {
    // モード
    // development:ソースマップが有効
    // production:コード圧縮
    mode: "development",

    // エントリーポイントのJs
    entry: `./src/index.js`,

    // コンパイルした結果を出力する先の設定
    output: {
        path: `${__dirname}/dist`,
        filename: `main.js`
    },

    // webpack-dev-serverの設定
    devServer: {
        static: "dist",     // 公開するルートディレクトリ
        open: true,         // サーバー起動後自動でブラウザ立ち上げ
        // port: 8081          // ポートを指定したい場合に記述。 デフォルトは8080。
    },

+   module: {
+       rules: [
+           {
+               test: /\.js$/,
+               use: [
+                   {
+                       // Babelの設定
+                       loader: "babel-loader",
+                       options: {
+                           presets: [
+                               "@babel/preset-env"
+                           ]
+                       }
+                   }
+               ]
+           }
+       ]
+   },
+
+   // ES5(IE11等)向けにコンパイルする設定
+   target: ["web", "es5"]
}

この設定でコンパイルすると、 ./dist/main.js の内容がこれまでと異なっています。
アロー関数や引数のデフォルト値、テンプレート構文がIE11でも読み取れるES5の記述となっています。
試しにローカルサーバーを立ち上げ、IE11でindex.htmlを表示すると問題なくJsの処理が動いています。
すごいですね。

この時点でのディレクトリ構成等

$ tree -I node_modules
.
├── dist
│   ├── index.html
│   └── main.js
├── package.json
├── src
│   ├── index.js
│   └── js
│       ├── minus.js
│       └── sum.js
├── webpack.config.js
└── yarn.lock

3 directories, 8 files
./package.json
{
  "name": "20221014_webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.4",
    "babel-loader": "^8.2.5",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }
}
./webpack.config.js
module.exports = {
    // モード
    // development:ソースマップが有効
    // production:コード圧縮
    mode: "development",

    // エントリーポイントのJs
    entry: `./src/index.js`,

    // コンパイルした結果を出力する先の設定
    output: {
        path: `${__dirname}/dist`,
        filename: `main.js`
    },

    // webpack-dev-serverの設定
    devServer: {
        static: "dist",     // 公開するルートディレクトリ
        open: true,         // サーバー起動後自動でブラウザ立ち上げ
        // port: 8081          // ポートを指定したい場合に記述。 デフォルトは8080。
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        // Babelの設定
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/preset-env"
                            ]
                        }
                    }
                ]
            }
        ]
    },

    // ES5(IE11等)向けにコンパイルする設定
    target: ["web", "es5"]
}

おわりに

Babelの導入迄できました。
次は最近よく見る、 npm yarn を用いてのJsのFWの導入を行ってみたいと思います。

参考

https://ics.media/entry/16028/

Discussion