webpackにbabelを導入する – npm + nunjucks + stylus で静的サイト制作を効率的にする(5)

2022年6月11日2022年6月13日

javascript stylus web制作

webpackを使用してjsファイルを集束（バンドル）することができましたがJavascriptは様々な規格があるので環境によって動かない場合があります。

そうならない為にひと手間加えてより確実に用意したjsコードが実行されるようにします。

今までの流れは下記記事に書いてあります。

Babelというものを使用します。

[Babel] Javascript用のコンパイラです。新しい書き方のjsコードを古い書き方のコードに変換することができます。

Babel公式サイト

webpackでjsファイルをバンドルする際にこのbabelを稼働させて古い書き方のコードに変換するという流れです。

必要なもの
各ツールのインストールと設定

必要なもの

webpack
babel-loader
@babel/core
@babel/preset-env
babel.config.json
webpack.config.jsの更新

▼各アイテムについて
[babel-loader] webpackでbabelを呼び出すために使用します
[@babel/core] coreという言葉からわかるようにbabel本体です
[@babel/preset-env] babelにはたくさんのプラグインがあり、一つずつインストールすると大変なので関連するプラグインを良い感じに使用してくれるbabel用プラグインです
[babel.config.json] babelの設定ファイルです

各ツールのインストールと設定

npmでツールをインストールしていきます

npm i -D webpack babel-loader @babel/core @babel/preset-env

インストールが終わったらwebpack.config.jsを変更します

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/index.js',
  output: {
    path: path.resolve(__dirname, './dist/js'),
    filename: 'script.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
    ]
  },
  target: ['web']
}

↑これは

test: /.m?js$/ ⇒.jsか.mjs（moduleに対応できる新しいjsの拡張子）という拡張子のファイルを対象にして
exclude: /node_modules/ ⇒ node_modulesフォルダは除外して
use以下 ⇒ bable-loaderをオプションにpreset-envプラグインを使用して処理を行って

という設定になります。

webpack.config.jsの設定が終わったらbabel.config.jsonを作成します

touch babel.config.json

babel.config.jsonには以下の設定を行います

{
  "presets": ["@babel/preset-env"]
}

ここまで来たら今回の処理は終了です。
以前に作成していた下記コマンドを実行してbabelで変換されたjsファイルができているか確認してください

npm build:js

IE11のサポート終了にともないこれからは古いjsコードに対応しなくてもよくなりましたがReactを使用するプロジェクトなどはBabelを活用しなければいけないのでwebpackとbabelはまだまだ手放せません。

今までの流れは下記記事に書いてあります。

必要なもの

各ツールのインストールと設定

関連投稿: