bower init-amd、es6、グローバル、ノードの違い

291

最初のBowerコンポーネントを作成しています。bower initスクリプトを実行した後、「このパッケージはどのタイプのモジュールを公開するのですか？」これらのオプション：

amd
es6
グローバル
ノード

これらのオプションの違いは何ですか？

— フェリス
ソース

121

あなたが知らなければ、それはおそらくグローバルがあなたにとって正しい答えです。

どちらにしても、次のことを理解する必要があります。

[更新]

この機能はごく最近にバウアーで導入され、まだ文書化されていません（AFAIK）。これは本質的にを説明しますmoduleType。これは、パッケージが使用されるモジュールテクノロジーを示します（上記を参照）。

現時点では、パッケージのファイルでmoduleTypeプロパティを設定する以外に効果はありませんbower.json。

元のプルリクエストについては、https：//github.com/bower/bower/pull/934を参照してください。

[更新＃2]

コメントに答えるための追加のポイント：

現在のところ、私の知る限りでは、moduleTypeプロパティの検証は行われていません。つまり、人々は、必要に応じて値を使用することを技術的に許可さangularjsれています。
亭委員会は、追加の包含に向けて熱心ではないようだnon-interoperable/proprietary moduleTypes（と思う作曲、角度、など） -分かりやすいが、まだ再び、何が本当に使用してから人々を妨げるものはないmoduleType彼らが望む価値を
以前の例外はの（やや）最近のの包含です。そのyui moduleTypeため、それらが協調計画の一部であると仮定すると、「例外」を作成する必要があります。

リストされていないパッケージマネージャー用のパッケージを作成し、それをバウアーに公開する場合はどうすればよいですか？

私はes6モジュールを作成し、/ patch es6-transpilerを使用して必要なパッケージ形式を出力します。それから私はどちらか/そして：

私のパッケージテクノロジーを選択肢として含めるようにバウワーたちに請願します（es6-transpilerがターゲットとしてサポートされているという事実に基づく）
パッケージのes6モジュールバージョンとトランスパイルされたXXXバージョンの両方を含むパッケージを公開es6し、moduleType

免責事項：私はangularjsモジュールを作成する実際の経験はありません。

— マングルド・ドゥッツ
ソース

4

グローバルはAngularJSモジュール/パッケージを作成するための正しい答えでしょうか？

1

「サポートされていないパッケージマネージャーをどうするか」という質問についてさらに考えを追加して投稿を更新しました。ただし、このフィールドは現在必須ではなく、現在は何も使用されていません。その値は参考情報です。angularjsそれ自体についてはglobals、「はい」を使用する場合がありますが、私のアップデートを読んでください。お役に立てば幸いです。

— マングルドドイツ2014

ノードを使用しています。ノードモジュールを公開しているということですか？また、「bower.jsonファイルを保存する場所がありません。bowerinitを使用して作成する」というメッセージが表示されたことに気付いたときに、bowerを使用してインストールしていた角度を使用しています。（または、これが別の質問である場合は、質問を書くことができます。これは、あなたの回答に関連するため、ここに置くのに適切なコメントだと思いました。ありがとう！）

— PrairieProf

27

初期

私bower initも初めて使っています。

オプションは、JavaScriptコードをモジュール化するさまざまな方法を参照する必要があります。

amd：definerequirejsのようなAMDの使用。
node：Node.jsを使用しrequireます。
グローバル：JavaScriptモジュールパターンを使用してグローバル変数（window.JQueryなど）を公開します。
es6：今後のEcmaScript6モジュール機能の使用。

私の場合、Node.jsモジュールdflowを作成しましたが、browserifyを使用して、グローバルdflow var：をエクスポートするdist / dflow.jsファイルを作成しているため、グローバルを選択しました。

その他のアップデート

ウィンドウグローバルオブジェクトとしてdflowをブラウザ化するために使用したコマンドは

browserify -s dflow -e index.js -o dist/dflow.js

ブラウザ内でもrequireを使いたいので変更しましたので、今使っています

browserify -r ./index.js:dflow -o dist/dflow.js

そして、私は変更bower.moduleTypeをするノードの私にbower.jsonのファイル。

主な動機は、私のモジュール名がダッシュを持っている場合、例えば、私のプロジェクトのためにということでしたフロービュー、私はする必要がcamelizeでグローバル名をされたFlowView。

この新しいアプローチには、他に2つの利点があります。

ノードとブラウザのインターフェースは同じです。クライアント側とサーバー側の両方でrequireを使用して、コード例を1回だけ記述し、両方のコンテキストで簡単に再利用できるようにします。
私はnpmスクリプトを使用しているため、${npm_package_name}変数を利用して、ブラウザ化に使用するスクリプトを1回記述できます。

これは別のトピックですが、後者の利点がどのように役立つかを検討することは本当に価値があります。package.jsonでnpm.scripts.browserify使用する属性を共有させてください

"browserify": "browserify -r ./index.js:${npm_package_name} -o dist/${npm_package_name}.js"

— Gianluca Casati
ソース

1

：あなたは、実際に内部の元に定義の必要が使用することができます

define(function(require, exports, module) {   "use strict";    module.exports = {     Collection: require("./collection"),     View: require('./view')   }; });

— ドロン・シーガル

7

参考までに、これは正確にbowerがモジュールタイプに関して指定するものです。

mainJavaScriptファイルで定義されたモジュールのタイプ。次の文字列の1つまたは配列を指定できます。

globals：使用window.namespaceまたはthis.namespace構文でグローバル名前空間に追加するJavaScriptモジュール

amd：構文を使用した、RequireJSなどのAMD互換のJavaScriptモジュールdefine()

node：構文を使用してノードおよびCommonJSと互換性のあるJavaScriptモジュールmodule.exports

es6：ECMAScript 6モジュールと互換性のあるJavaScriptモジュール、使用exportおよびimport構文

yui：YUIモジュールと互換性のあるJavaScriptモジュール、YUI.add()構文を使用

— 塔
ソース