要約
2018 年現在のフロントエンド開発 (HTML, CSS, JavaScript) のスタンダードは Webpack によるモジュール分割。
しかし、Webpack にはそれなりの環境準備が必要であり、慣れていないと時間がかかるデメリットがある。
ES6 に対応した最新のブラウザーを使えば、Webpack なしでもモジュール分割された JavaScript を使うことができるので、簡単な検証にはそちらが向いている。
本文
Webpack によるモジュール分割
Webpack は JavaScript の バンドル を担う。
たとえば、次のコードを分割することができる：
分割前
<!DOCTYPE html>
<script src="./index.js"></script>
// 汎用的な処理
function add(x, y) {
return x + y;
}
// アプリのロジック
console.log(add(1, 2));
// 結果は 3
分割後
<!DOCTYPE html>
<script src="./index.bundle.js"></script>
// 汎用的な処理
export function add(x, y) {
return x + y;
}
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 の読み込みはランタイムに解決されるため、バンドルのための環境準備が不要になる。
その場合のサンプルは次のとおり：
<!DOCTYPE html>
<script type="module" crossorigin src="./index.js"></script>
※ common.js と index.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 メソッドを使う。
// 汎用的な処理
module.exports.add = function add(x, y) {
return x + y;
};
const { add } = require('./common-node.js');
// アプリのロジック
console.log(add(1, 2));
node index-node.js
# 結果は 3
-
コメントで教えていただいた。実験的だが使えるようだ。 Node.js(v8.5.0以降)でBabelやwebpackを利用せずにimport/exportを利用する - Qiita ↩