web-dev-qa-db-ja.com

今日、クライアント側のJavaScriptライブラリをモジュール化してパッケージ化する方法は？

私は最新のクライアント側のJSエコシステムに追いつき、CommonJSとAMD（関連ツールを含む-browserify、requirejs、onejs、jam、その他数十）について読んでいます。 Javascriptライブラリを作成している場合、それをどのようにモジュール化/パッケージ化して、最も広くアクセスできるようにするのですか（理想的には、CommonJS、AMD、およびどちらでもないことを誓うユーザーによって）。

JQueryのような人気のあるライブラリは、それ自体を構築するために古いファイルの連結を使用し、exportsまたはグローバルコンテキストのどちらに書き込むかを動的に検出するようです。私は現在同じことをしていますが、主な欠点は、（jQueryとは異なり）いくつかのライブラリに依存している場合、推移的なセットを手動で事前に含めるようにユーザーに要求する必要がないことです。 （現在、私は2つの依存関係しか持っていません。）そしてもちろん、グローバルな名前空間の汚染。

または、コンテキストごとに、ライブラリの複数のバージョンを生成するのが最もクリーンですか？

パッケージ化と公開についても疑問に思っています。いくつかのシステムがありますが、主なものはバウアーであると私は信じています。バウアーは、フェッチするだけなので対処が簡単です。ただし、コンポーネント（CommonJSが必要）などの他のパッケージシステムも対象にする必要があるのか​​どうか疑問に思っています。

私が知っておくべき他の関連する側面はありますか？このすべてについて従うべき良い例のプロジェクトはありますか？

javascriptmodulespackages
11
Yang

私はいつもビルドファイルを使用してきましたが、最初のnodejsプロジェクトを開始して以来、 browserify を使用し始めました。 browerifyおよびその他の類似のライブラリを使用すると、コードはビルドファイルになります。両方で実行できるクライアントライブラリとサーバーライブラリを利用していますが、純粋にクライアントコードでも動作します。まとめると、browserifyはノードでコードを書くことのすべての利点を提供し（グローバル、npm、単純なrequireを回避するためのanon関数はありません）、1つのコマンドでクライアントで実行するコードをパッケージ化し、1つのファイルのみをロードできます。

Browserifyを使用すると、（app.jsという名前の）次のようなことができます。

var MyLib = require('../myLib');

if(typeof window !== 'undefined') {
    window.MyLib = MyLib;
    window._ = require('underscore');
    window.$ = require('$');
    window.MyLib.myCan = require('./3rdParty/can/can');
}

browserify app.js> client.js

次のようなものが生成されます：

[function(require,module,exports){
    window.MyLib = //MyLib code
},
function(require,module,exports){
     window._ = //_ code
},
function(require,module,exports){
    window.$ = //$ code
},
function(require,module,exports){
    window.MyLib.myCan = //can code
}

定義するファイルには、すべてのサードパーティライブラリを含めることができ、それを使用する開発者と衝突することはありません。

-コメントに応答して編集します（そして、質問を完全にミスします）

それはあなたの依存関係と、すべてのバージョンとライブラリで機能することを確認するために費やす時間に依存すると思います。依存関係が一般的で、バージョンごとに同じAPIを使用している場合、バックボーンルートに移動し、ユーザーに$と_を与えるだけで済みます。バンドルされたファイルの一部として、もっとあいまいなライブラリを置くことをお勧めします。オプションもカットして乾燥させる必要はありません。事前にビルドしたり、独自のパッケージを作成したりできます。

2
pllee

クライアント側ライブラリの種類：

  1. DOMに触れる
  2. DOMに触れない

最初の種類（UIウィジェットなど）では、通常、jQueryが存在すると想定します。 「DOMライブラリにとらわれない」と書いて、あまり人気のないものでも動作するようにできますが、私は気にしません。

第二種と。まず、jQueryプラグインにしないでください。たとえば、「jQuery cookieプラグイン」はばかげていますが、そのようなライブラリは実際に存在します。

これらの種類には両方とも、依存関係がない、小さな依存関係、または巨大な依存関係がある可能性があります。この意味では、domライブラリは依存関係としてカウントされません。最初の2つでは、それらをライブラリスコープ内で連結するだけで、重複の可能性を心配する必要はありません。たとえば、jQueryは内部のisArrayLike関数を連結しますが、ユーザーがランダムユーティリティベルトライブラリから自分の関数をすでにインクルードしている場合もあります。

私は、ライブラリ（実際には言語）を開発するときに、大きな依存関係を持つ個人的な経験を1つだけ持っています-moment.js。この場合、私は2つのビルドを提供します。1つはmoment.jsを連結し、もう1つは連結せずに、ユーザーがそれを含める責任があります。これが良い解決策かどうかはわかりません。

そしてはい、すべての場合において、正常に機能する1つの最終的な大きなファイルを構築するjQueryアプローチが採用されています。下部にモジュールのボイラープレートがあります（require/AMD/globalなどの検出）。

0
Esailija