JSモジュール化するしくみの規格はCommonJS、AMD、UMD、ES6(ES2015)の4つ

複雑すぎる。

参考

• https://tsuchikazu.net/javascript-module/
• Modular JavaScript , CommonJs, AMD, UMD について – Supertrue

前回

http://ytyaru.hatenablog.com/entry/2019/03/25/000000

JSモジュール化する規格とその実装

規格	実装	形態
CommonJS	browserify	Node.js npm モジュール
AMD	require	JSライブラリ
UMD	umd	Node.js npm モジュール？
ES2015	import、トランスパイラ(Babel)	言語仕様（構文）

何が違う？

AMD

define(['jquery'] , function ($) {
    return function () {};
});

以下のように書くこともできる。

define(function (require) {
    var $ = require('jquery')
    return function () {};
});

• トランスパイル不要（非同期にJSを読み込む）
• requireを使ってブラウザのみで実装できる

CommonJS

var $ = require('jquery');
exports.myExample = function () {};

• 実行前にJSソースコードをトランスパイルして単一JSファイルにする
  • Node.jsが必要

UMD

AMDとCommonJSの記法をサポート。

ES2015

import $ from "jquery"

import構文が標準実装されているブラウザなら動作する。未実装ブラウザで動作させるには、トランスパイルしたコードにする必要がある。

• 1. ブラウザ標準実装 (ES6 の ES Moduleも？)
  2. 標準の構文であるためライブラリ読込不要
  3. トランスパイル不要
  4. JavaScript モジュールの現状 | POSTD
• 1. トランスパイル
  2. Babel等を使ってES6(ES2015)未実装でも動作するJSコード(ES5)にビルドする
     • Node.js
       • webpack, browseflyなどによりファイル結合することで可
     • ブラウザ
       • Babel on CDNではimportできない

どれを使うべき？

結論は出せない。コードの規模や実効速度などによって最適な選択がかわる。

Node.js必須

ES2015が実装されたならそれをつかうべき。トランスパイル不要でコードも単純。

ES2015が実装されていないなら、トランスパイル環境を整えて開発すべき。コードの保守性と実効速度の面において最良。（ただし環境構築が非常に面倒。コードを変更する度にトランスパイルが必要なのも）

ブラウザのみ

Node.js不要。初心者はこれ一択か。CDNでライブラリ参照すればすぐ使える。ただしAMDのみ。CommonJS式でのモジュール化は原理的にできない。

require

requireのCDNを使えばブラウザのみで実装できる。AMD。コードが微妙。Node.jsとの互換性がない。セキュリティ制約によりローカルで動作確認できない。トランスパイル不要なのでその環境を用意しなくていいのがメリットか。また、遅延読込のため、起動速度は高速か。

欠点のほうが多いので、トランスパイル環境を整えて開発するのが一般的な模様。

CommonJSは不可

browserifyにCDNはない。そもそも別ファイルをひとつに統合する処理はローカルかサーバサイドでないと不可能。クライアントサイドだけでファイル結合はできない。

BabelのCDNを用いて動的トランスパイルできる。ただしimport構文は使えない。上記browserifyの問題があるため。