入門者/初心者にもわかるwebpackの基礎(Babel編)

前回の入門者/初心者にもわかるwebpackの基礎(CSS Loader編)の続きです。今回の内容はwebpackでBabel(バベル)を使用した場合の設定手順の説明と動作確認を行っています。

1 Babelについて
2 WebpackでのBabelの使い方
3 source map(ソースマップ)の作成

Babelについて

JavaScriptに限らず便利なツールはさらに便利で使いやすくするため日々進歩/進化を繰り返しています。しかし一部でその進歩に追いついていない場面を頻繁に目にします。あなたの会社では今もWindows 7/XP/Vistaを使用しているかもしれません。Windows 7/XP/Vistaのような古いOSで動かせるブラウザには制限があり、古いブラウザではJavaScriptの新しい機能を動かすことができません。また、最近のブラウザの中でも新しい機能に対応していないものもあります。

そこで登場したのがBabelです。新しい機能を使って記述したJavaScriptのコードを古いブラウザでも理解できるようにコード変換を行なってくれるツールです。このツールを利用することで開発者は新旧のブラウザを意識することなく新しい機能の記述・知識を使って効率よくプログラムを作成することができます。

Babelが行う変換のことはtranspiler(トランスパイラ)とよばれています

Babelを利用した変換はECMAScirpt 2015(「ES6」)が登場する前の手法でコーディングしている場合、また古いブラウザではプログラムが動かなくても関係ないという場合には必要ありません。

WebpackでのBabelの使い方

Bableをwebpackで利用するためにはインストールが必要になります。Babelの公式サイトにアクセスして上部のSeupのリンクをクリックして、webpackでのインストール方法の確認を行います。

Bableが使用できるビルドツールやフレームワークがたくさんあることを確認できます。Build systemsカテゴリーのwebpackをクリックしてください。

インストール手順から設定方法までwebpackの動作に必要なことはすべて記述されているので、この流れ通りに設定を行います。

前準備

動作確認を行うためにはnpmのインストールが事前に行われている必要があります。またnpmでwebpack, webpack-cli, css-loader, style-loader, scss-loader, node-scssをインストールし、package.jsonのscriptsに以下のwebpackコマンドの設定が完了している環境で動作確認を行っています。


  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

環境を構築するためのパッケージのインストール方法については下記の文書に記載しています。

Bableのインストール

公式サイトの手順に沿ってbabel-loaderとbabel/coreのインストールを行います。bable/coreの前には”@”がつきます。


test $ npm install --save-dev babel-loader @babel/core
npm WARN test@1.0.0 No description
npm WARN test@1.0.0 No repository field.

+ @babel/core@7.4.4
+ babel-loader@8.0.6
added 25 packages from 14 contributors and audited 6119 packages in 15.055s
found 0 vulnerabilities

webpack.config.jsへのbabelの追加

webpack.config.jsのmoduleにbabelのルールを追加します。追加する値も公式サイト上の手順を参考に設定します。


const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }, 
  module:{
    rules:[
        {
            test:/\.scss$/,
            use:['style-loader','css-loader','sass-loader']
        },
        { 
            test: /\.js$/, 
            exclude: /node_modules/, 
            loader: "babel-loader" 
        }        
   ]
  }
}

preset(プリセット)の設定

bable-loaderを設定しただけではまだ変換を行うことはできません。変換が必要な新しい機能にはbabelのPlugin(プラグイン)が必要になります。

元来のJavaScriptではClassは使用できませんでしたが、新しい機能の一つとして現行のJavaScriptではClassも使用することができます。そのClassを変換するClasses(@babel/plugin-transform-classes)というプラグインがあり、そのプラグインを使って変換を行います。

プグインをまとめたものにpreset(プリセット)があり、presetのインストールを行えば個別のプラグインをインストールすることなく変換を行うことができます。


mac $ npm install @babel/preset-env --save-dev

Plugin(プラグイン)一覧はBabel公式ページから確認することができます。

presetのインストールが完了したら、こちらも公式ページの手順に記載の通り、トップディレクトリに.babelrcを作成して、以下を記述します。


mac $ touch .babelrc


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

作成時のディレクトリ構成は下記のようになっています。

Babelによる変換の確認

Classを作成して、babelによって変換が行われるのか確認を行いましょう。index.jsに下記の内容を記述します。


class Test {
  constructor(name) {
    this.name = name;
  }

  logger () {
    console.log("Hello", this.name);
  }
}

let test = new Test('world');

test.logger();

webpackを実行するとindex.jsに対してbabelの処理が行われ、bundle.jsが作成されます。


mac $ npm run dev

> test@1.0.0 dev /Users/mac/Document/test
> webpack --mode development

Hash: cb470bcb1d402518a7f1
Version: webpack 4.31.0
Time: 3260ms
Built at: 2019-05-21 20:12:08
    Asset      Size  Chunks             Chunk Names
bundle.js  4.79 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/index.js] 1010 bytes {main} [built]

index.htmlのscriptタグに作成したbundle.jsを指定するとConsoleにHello Worldが表示され、ブラウザがClassの入ったコードを処理できていることが確認できます。

動作確認したブラウザがJavaScriptのClassに対応している場合は、ConsoleにHello worldが出力されてもBabelで変換されたかどうかはわかりません。変換されているか確認するためにwebpackで作成されたbundle.jsの中身を確認します。

下記の部分がClassが変換されている箇所です。


***/ (function(module, exports) {

eval("function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor))

Babelを使用していない場合はファイルに記述した情報がそのまま出力されるためBabelにより変換が行われていることを確認することができます。


/***/ (function(module, exports) {

eval("class Test {\n  constructor(name) {\n    this.name = name;\n  }\n\n  logger () {\n    console.log(\"Hello\", this.name);\n  

/***/ })

source map(ソースマップ)の作成

webpack.config.jsファイルにdevtoolを設定することでsource mapを作成することができます。


module.exports = {
  module: {
    rules: [
//略
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
  devtool: 'source-map',
};

npm run devを実行してください。distフォルダの中にmap.js.mapファイルが作成されます。変換前のJavaScriptファイト、変換後のJavaScriptファイルの対応関係が記述されています。

Bable(バベル)という名前を聞いた時、何か難しいと思ったかもしれませんがBabelの公式サイトに記載されている手順に従えばwebpackと簡単に連携でき変換できることが確認できました。

入門者/初心者にもわかるwebpack 4の基礎(Babel編)