home ホーム search 検索 -  login ログイン  | reload edit datainfo version cmd icon diff delete  | help ヘルプ

JavaScript/参考メモ/モジュールロード方式とパッケージ管理(2015-03時点) (v1)

JavaScript/参考メモ/モジュールロード方式とパッケージ管理(2015-03時点) (v1)

JavaScript / 参考メモ / モジュールロード方式とパッケージ管理(2015-03時点) (v1)
id: 1402 所有者: msakamoto-sf    作成日: 2015-03-23 19:02:40
カテゴリ: JavaScript 

2015-03時点でJSのモジュールロードとかパッケージ管理について見てみると、CommonJSだとかAMDだとかBrowserifyとかwebpackとかbowerとか色々出てきて混乱したので、整理してみた勉強メモです。各プロダクト・仕様のできることや役割について、まだまだ誤解してる部分もあると思いますので、勉強中ということで割り引いてください。

簡単な歴史と経緯

※細かい歴史とか時系列は無視してます、というか知らないで書いてます。あくまでも自分の頭のなかでの整理用。

1. require.jsがブラウザ上のアプリで頑張ってモジュールロードできるようにしてくれた。
2. 一方、Server Side JSの仕様策定から、CommonJSのrequire()が出てきて、node.js でのモジュールロードで使えるようになった。
3. しかし、node.js 上で require() が動くなら、ブラウザ上でもrequire()動いて欲しい。→ CommonJSのrequire()が書かれたJSファイルを、ブラウザ用に変換してくれるビルドツールの Browserify が登場。
4. だけどやっぱりCommonJS側でもブラウザ向けに最適化されたモジュールロード、取り込みたいよねということでAMD(Asynchronous Module Definition)の仕様が立ち上がったが、CommonJSでは決めきれずに外出しされ、require.js側でも取り込んだ。
5. この時点で、以下のような勢力図になった。

  • サーバサイド・デスクトップアプリ向け→ node.js & npm エコシステム
    • CommonJSのrequire()でモジュールロード
    • パッケージシステムは npm (=package.json)
  • ブラウザ向け
    • モジュールロードは require.js でAMD対応。
    • パッケージシステムは・・・まだ無かったかも・・・?
    • Browserify使えば、npmエコシステム側のパッケージシステムを使えたことは確か。

6. その後、Bowerとwebpackが登場した。

  • BowerはTwitter社が作った、Webブラウザ向けのパッケージ管理システム。つまりnode.jsのnpmに対応する。package.jsonに似た、bower.jsonで依存関係と自分自身のパッケージ情報を定義する。
  • webpackはCommonJSとAMDの両方をサポートするモジュールローダだが、どちらかというとWebアプリで取り扱う種々のファイルをロードし、変換する、一種の変換システムとして利用できるらしい。まさにWebアプリを "pack" するためのツールと言える?

2014年内だと、npmエコシステムはやはりサーバサイドでしか扱えないライブラリが手厚く、逆にBower側はブラウザ向けのjQueryやAngularJSなどが充実しているようだ。

整理している中で注意が必要だと感じたのが、「モジュールロードの方式」と「パッケージシステム」は直交する点。
「パッケージシステムをどうする?」という点で出てくるのが、npm陣営(package.json)とbower陣営(bower.json)になる。
npm陣営は当然CommonJSの実装であるnode.jsエコシステムがメインであるため、どうしてもブラウザ上で動作するアプリ向けのライブラリが弱かったらしい。
そこで出てきたのが、jQuery/AngularJS/BackboneJSなどブラウザ上で動作するライブラリを手厚くしたBowerというパッケージシステムであり、これがbower.jsonというファイルで管理される。

箇条書きで整理

  • モジュールのロードをどうするか?
    • サーバサイド・デスクトップアプリ向け → CommonJSのrequire()
      • npm
      • webpack
    • ブラウザ上のWebアプリ向け → AMD(Asynchronous Module Definition)
      • require.js
      • webpack
    • その他
      • browserify → CommonJSのrequire()で書かれたJSを、ブラウザ向けのJSに変換してくれるツール。
  • パッケージシステムをどうするか?
    • サーバサイド・デスクトップアプリ向け → npm陣営(package.json)
    • ブラウザ上のWebアプリ向け → bower陣営(bower.json)

参考URL

総論

AMD, require.js 周り

個別のプロダクト・ライブラリ



プレーンテキスト形式でダウンロード
現在のバージョン : 1
更新者: msakamoto-sf
更新日: 2017-02-12 19:08:08
md5:7abe9a67ee5d731613ec260eb66353b2
sha1:e6653a22d43a630c2346050faed1b33ee642b968
コメント
コメントを投稿するにはログインして下さい。