【javascript】ファイルをまとめ、ブラウザ実行可能な形式に変換する – webpack と babel

Logo - ©OpenJS FoundationOpenJS Foundation Trademark Policy
2022.06.26

はじめに

javascriptの仕様はECMAScriptとしてまとめられている。ECMAScriptは毎年更新されており、発表後にブラウザで利用できるようになるのは少し経ってからとなる。一方、プログラマとしては効率化等のために最新の構文を利用したいという欲求がある。このため、最新の構文をブラウザで利用可能な構文に変換して利用するという開発手法が一般化している。

今回は、新しい構文で記載したjavascriptをブラウザで動作するようにするため、webpackとbabelの環境構築と利用方法を見ていく。

概要

Webpackとは

javascriptの関連リソースを１ファイルにまとめるNode.jsライブラリ。node.js上で動作。ファイル数が減ることにより、HTTPリクエストが減り、webサイトの高速化が望める。また、node.jsで動作するjavascriptをブラウザで動作するjavascriptに変換することもできる。

Babelとは

ブラウザでも動作する古いjavascriptコードに変換するツール。c言語等でexeファイルを作る（高級言語から機械語に変換する）ことをコンパイルというが、babelのように同一言語内で構文を変換することをトランスパイルと呼ぶ。webpackから呼び出す形で、自動連携できる。

Node.js

インストール

webpackとbabelを利用するため、まずは動作環境であるNode.jsと関連ツールをインストールする。

nvm

最初にnode.jsのバージョン変更ツールをインストールする。プロジェクトやライブラリによって対応しているバージョンが異なる場合に、nvmを利用して実行するnode.jsのバージョンを変更することができる。

公式サイトに記載の以下のコマンドを実行後、コンソールを再起動したら「nvm」コマンドが使えるようになる。URLにバージョン指定があるため、最新のURLは公式サイトで要確認。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

よく使うコマンドは以下のとおり。

コマンド 内容
nvm install [バージョン] バージョン指定でnode.jsとnpmをインストールする
nvm ls インストール済みのバージョン一覧を確認する
nvm use [バージョン] 利用するバージョンを入れ替える

node.js / npm

以下のコマンドで最新安定版のnode.jsとnpm(パッケージ管理ツール)がインストールされる。

nvm install --lts

よく使うコマンドは以下のとおり。「-g」オプションを追加すると、グローバルインストール（OS全体で利用可能）となる。

コマンド 内容
npm install [パッケージ名] インストール
–save：package.jsonのDependenciesに登録
–save-dev：package.jsonのdevDependenciesに登録
パッケージ名を省略：package.jsonの本番用＋開発用のパッケージをインストール
パッケージ名を省略＋「–production」：package.jsonの本番用のパッケージをインストール
npm update [パッケージ名] アップデート
npm uninstall [パッケージ名] アンインストール
–save：pakage.jsonのDependenciesから削除
–save-dev：pakage.jsonのdevDependenciesから削除
npm list インストール済み一覧

webpack

インストール

プロジェクト毎に異なるバージョンのwebpackが利用できるように、ローカルインストールが推奨されている。

npm install --save-dev webpack webpack-cli

設定ファイル

「webpack.config.js」を作成して設定を記載すると、webpack実行時に設定が読み込まれる。

module.exports = {
  mode: "development"

  // JavaScriptファイルのroot
  entry: `./src/index.js`,

  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "main.js"
  }
};

実行

webpackの実行には「npx」を利用する方法と、「npm」を利用する方法がある。

npx利用

「src」フォルダにjsファイルを入れて、以下を実行する。結果は「dist」フォルダに出力。

npx webpack

差分ビルド

npx webpack --watch

npm利用

package.jsonに設定を記載して、以下のコマンドでビルド可能

npm run build

【package.json】

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2"
  },
  "private": true
}

Babel

インストール

以下のコマンドを実行する。

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

設定ファイル

Babel利用時には「.babelrc」ファイルを作成し、以下の設定を記載する

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

webpackとの連携

以下の内容を「webpack.config.js」に追加すると、webpackコマンド実行時にbabelが自動適用される。

  // Babel設定
  module: {
    rules: [
      {
        // 拡張子 js のファイル（正規表現）
        test: /\.js$/,
        // ローダーの指定
        loader: "babel-loader",
      },
    ],
  }

サンプル1(動作確認)

動作を確認するためのサンプルを示す。

フォルダ構成

フォルダ構成と各ファイルの内容は以下のとおり。

Root
┣　src
┃　┣　src1.js
┃　┗　src2.js
┣　.babelrc
┣　webpack.config.js
┗　package.json

【src1.js】

import { helloworld } from "./src2.js";
alert("src1実行");
helloworld();

【src2.js】

export function helloworld() {
    alert("src2.js実行");
}

【.babelrc】

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

【webpack.config.js】

/** @type {import('webpack').Configuration} */
module.exports = {
  mode: "development",
  entry: `./src/index.js`,

  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "main.js"
  },

  // Babel設定
  module: {
    rules: [
      {
        // 拡張子 js のファイル（正規表現）
        test: /\.js$/,
        // ローダーの指定
        loader: "babel-loader",
      },
    ],
  }
};

【package.json】

{
 "scripts": {
 "build": "webpack"
 },
 "devDependencies": {
 "@babel/core": "^7.18.5",
 "@babel/preset-env": "^7.18.2",
 "babel-loader": "^8.2.5",
 "webpack": "^5.73.0",
 "webpack-cli": "^4.10.0"
 },
 "private": true
}

実行

以下のコマンドを実行すると、「dist」フォルダが作成され「main.js」が出力される。このmain.jsをhtmlファイルから呼び出すと、alert関数が実行される。

npm install
npm run build

サンプル2(githubライブラリのビルド)

github等で「package.json」や「.babelrc」ファイルもともに公開している場合は、本記事の内容でビルドすることでブラウザで動作するjavascriptに変換できる場合が多い。

一例としてgithubにある以下のライブラリをビルドしてみる。gifuctはアニメーションgifをデコード(フレーム分割)するためのライブラリである。

ダウンロード

githubに記載があるとおり、以下のコマンドでファイルをダウンロード（ローカルインストール）する。

npm install gifuct-js
cd node_modules/gifuct-js

ダウンロードしたフォルダを確認すると、「package.json」と「.babelrc」が存在しており、「package.json」の「devDependencies」を確認すると、webpackとbabelを利用していることがわかる。

この時点では必要なライブラリ(webpackやbabel等)は含まれていないので、以下のコマンドで依存ファイルをダウンロードする。

npm install

これにより、package.jsonに記載された依存ライブラリのダウンロードが完了する。

設定の確認（package.json）

ビルド方法の確認のために、package.jsonの内容を確認する。

{
  "name": "gifuct-js",
  "version": "2.1.2",
  "description": "Easy to use efficient .GIF parsing in javascript",
  "main": "lib/index.js",
  "types": "index.d.ts",
  "scripts": {
    "build": "babel src --out-dir lib",
    "build-demo": "webpack demo/demo.js -o demo/demo.build.js --mode=\"none\""
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/matt-way/gifuct-js.git"
  },
  "keywords": [
    "gif",
    "parser",
    "javascript"
  ],
  "author": "Matt Way",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/matt-way/gifuct-js/issues"
  },
  "homepage": "https://github.com/matt-way/gifuct-js",
  "devDependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.11.4",
    "@babel/preset-env": "^7.11.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "js-binary-schema-parser": "^2.0.3"
  }
}

大事なところは「scripts」の「build」と「build-demo」。「build」では、babelを用いてsrcフォルダを入力として変換後のファイルをlibフォルダに出力する。「build-demo」では、webpackを用いてdemo.jsを変換してdemo-build.jsを出力している。

今回はブラウザででライブラリを使用するため、「build-demo」を利用する。

実行

package.jsonの「build-demo」コマンドは、以下で実行する。

npm run build-demo

  • TIPS

    Node.jsのバージョン17以上では、エラー「Error: error:0308010C:digital envelope routines::unsupported」が発生する。その場合、nvmを用いてNode.jsのバージョンを下げて対応する。

ビルドに成功すると、demo-build.jsが出力される。実際にライブラリを使用する際には、必要な関数をdemo.jsに記載して、上記コマンドでコンパイル、その後、出力されたdemo-build.jsをhtmlファイルから読み込んで利用することになる。

タイトルとURLをコピーしました