Edited at

Webpack を使わずに import 文を使う

More than 1 year has passed since last update.


要約

2018 年現在のフロントエンド開発 (HTML, CSS, JavaScript) のスタンダードは Webpack によるモジュール分割。

しかし、Webpack にはそれなりの環境準備が必要であり、慣れていないと時間がかかるデメリットがある。

ES6 に対応した最新のブラウザーを使えば、Webpack なしでもモジュール分割された JavaScript を使うことができるので、簡単な検証にはそちらが向いている。


本文


Webpack によるモジュール分割

Webpack は JavaScript の バンドル を担う。

たとえば、次のコードを分割することができる:

分割前


index.html

<!DOCTYPE html>

<script src="./index.js"></script>


index.js

// 汎用的な処理

function add(x, y) {
return x + y;
}

// アプリのロジック
console.log(add(1, 2));

// 結果は 3


分割後


index.html

<!DOCTYPE html>

<script src="./index.bundle.js"></script>


common.js

// 汎用的な処理

export function add(x, y) {
return x + y;
}


index.js

import { add } from './common.js';

// アプリのロジック
console.log(add(1, 2));

// 結果は 3


分割後の 2 ファイルを Webpack によってバンドルすると、分割前の index.js のようなファイルとして index.bundle.js が生成される。

ブラウザーからは index.bundle.js のみを読み込んで、実行することができる。

common.js ─┐

index.js ─┴─ index.bundle.js

common.js を読み込むための import 文は、「生の」JavaScript では使えない(正確には、使えなかった)。

Webpack はその点を補う。


Webpack にはそれなりの環境準備が必要

Webpack のメリットを享受するには、環境準備が必要である。

環境準備とは次を指す:


  • Node.js, npm のインストール

  • Webpack のインストール

  • webpack.config.js の作成

慣れれば問題はない。

しかし、たとえば Webpack を知らない人に JavaScript のサンプルを渡す場面で、こういった本質的ではない準備に時間を取られることがある。


Webpack なしでもモジュール分割された JavaScript を使うことができる

ES6(JavaScript の仕様のバージョン名)に対応したブラウザー(最新の Chrome, Firefox, Edge ら)は、「生の」JavaScript で import 文を使うことができる。

その場合、common.js の読み込みはランタイムに解決されるため、バンドルのための環境準備が不要になる。

その場合のサンプルは次のとおり:


index.html

<!DOCTYPE html>

<script type="module" crossorigin src="./index.js"></script>

common.jsindex.js の中身は Webpack 利用の場合と同じ

注目すべきは



  • index.bundle.js ではなく index.js である


  • type="module" が必要(import を有効にするフラグとして)

  • ほとんどの場合、crossorigin が必要(認証が必要なリソースを import するため)

といった点。

Webpack との違いや、type="module" 出ないスクリプトとの違いはほかにもあるが、長くなるので述べない。


まとめ

JavaScript を動かしてみるだけなら、Webpack を使わず、type="module" によるスクリプトの読み込みが手軽で、おすすめ。


参考


Node.js の require との違い

Node.js では import 文は使えない。1

代わりに module.exports プロパティと require メソッドを使う。


common-node.js

// 汎用的な処理

module.exports.add = function add(x, y) {
return x + y;
};


index-node.js

const { add } = require('./common-node.js');

// アプリのロジック
console.log(add(1, 2));


node index-node.js

# 結果は 3





  1. コメントで教えていただいた。実験的だが使えるようだ。 Node.js(v8.5.0以降)でBabelやwebpackを利用せずにimport/exportを利用する - Qiita