More than 5 years have passed since last update.

【小ネタ】Babelのpresetsを設定する2つの方法【Webpack】

Last updated at 2018-12-31Posted at 2018-12-31

はじめに

昨今のJavaScriptでのフロントエンド開発において、Babel及びWebpackは無くてはならないものになっているかと思います。
通常、Babelのpresetは.babelrcに記述しますが、モジュールバンドラー側（今回の場合、具体的にはWebpack側）でも指定可能することが可能です。

Webpackを利用する開発環境において、Babelのpresetを設定する方法をまとめてみました。
# フロントエンドを想定した内容であるため、Node APIを利用した指定方法については触れません。

設定する

Webpackバージョン

Webpackは下記のバージョンを利用しました。

webpack 4.28.3
webpack-cli 3.1.2
webpack-dev-server 3.1.14

npmパッケージのインストール

では実際に設定してみます。
Babel loaderは8、Babel coreは7です。presetとして、preset-env及びpreset-reactを使います。

2019/1/1現在、インストールされるバージョンは下記のようになります。

babel-loader 8.0.4
@babel/core 7.2.2
@babel/preset-env 7.2.3
@babel/preset-react 7.0.0

インストールコマンドは下記のようになります。

最新版でインストール

$ npm install --save-dev webpack webpack-cli webpack-dev-server
$ npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react

他に利用しているplug-in等が新しいバージョンに対応しておらず、古いバージョンが必要な場合は、Babel loaderの7、Babel coreの6を使うとよいでしょう。
なお、パッケージ名が変更になっているので気を付けてください。また、preset名も変更になっているので、実際のpresetの設定は読み換えてください。

babel-loader 7.1.5
babel-core 6.26.3
babel-preset-env 1.7.0
babel-preset-react 6.24.1

インストールコマンドは下記のようになります。

一つ前の版でインストール

$ npm install --save-dev webpack webpack-cli webpack-dev-server
$ npm install --save-dev babel-loader@7 babel-core@6 babel-preset-env babel-preset-react

webpack.config.jsと.babelrcに書く

まずは、Webpackの設定ファイルwebpack.config.jsにbabel-loaderを利用する旨を設定し、.babelrcに必要なpresetを定義する方法です。
公式ドキュメントもこの方法です。
Using Babel - How to use Babel with your tool of choice.

webpack.config.js

const webpackConfig = {
  entry: [
    // 省略
  ],
  output: {
    // 省略
  },

  module: {
    rules: [
        {
            loader: "babel-loader",
            test: /\.js$/,
            exclude: /node_modules/
        }
    ]
  },
  devServer: {
    // 省略
  }
};

module.exports = webpackConfig;

.babelrc

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

webpack.config.jsだけに書く

Webpackの設定ファイル内で、'babel-loader'にoptionsオブジェクトを指定し、Babelのpresetを指定する方法です。

webpack.config.js

const webpackConfig = {
  entry: [
    // 省略
  ],
  output: {
    // 省略
  },

  module: {
    rules: [
        {
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/,
            options: {
              presets: ["@babel/preset-env","@babel/preset-react"]
            }
        }
    ]
  },
  devServer: {
    // 省略
  }
};

module.exports = webpackConfig;

ちなみに以前のバージョンのWebpackでは「query」というオブジェクトで指定していたようですが、deprecatedになっているようです。

Loader Features

Loaders can be configured with an options object (using query parameters to set options is still supported but has been deprecated).

どちらの方法が良いか

どちらの方法を採用する方が良いか様々な観点がありますが、大きく以下の2つが考えられます。

Babel開発者が推奨する方式を利用する
プロジェクトにおける利便性の観点から、pros/consを検討する

Babelの公式ドキュメントには.babelrcを利用することを推奨している記述が散見されます
従って、前者の観点に基づく場合は.babelrcを利用する方が良いと言えます。

後者の観点に基づく場合、プロジェクト規模・位置づけによってその都度判断するのが良いと言えます。

一定規模以上のプロジェクトの場合、targets等の設定項目が増えてくると予想されるため、Babelに関する設定は全て.babelrcに寄せたほうが良いでしょう。
ただし、極小規模のプロジェクトや、何らかの機能検証等を目的とした使い捨てプロジェクトなど、難しいことを考えずにES2015(ES6)以降の機能を使いたい場合は、webpack.config.jsにまとめて書いたほうが良いように思います。