web-dev-qa-db-ja.com

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

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

  • AMD
  • es6
  • グローバル
  • ノード

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

node.jsecmascript-6bowerjs-amdes2015
291
pherris

わからない場合は、グローバルが正しい答えである可能性が非常に高いです。

いずれにしても、あなたは理解する必要があります：

[更新]

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

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

元のpull-requestについては https://github.com/bower/bower/pull/934 をご覧ください。

[更新＃2]

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

  • 現在のところ、moduleTypeプロパティの検証は行われていません。つまり、angularjsを使用する傾向がある場合は、moduleTypeを含め、技術的には必要な値を使用できます。
  • bower Committee は、追加のnon-interoperable/proprietary moduleTypes（作曲家、角度など）を含めることに熱心ではないようです。
  • 前の例外はyui moduleTypeの（やや）最近のインクルードであるため、 協調計画の一部 であると仮定して、「例外」を作成する必要があります。

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

Es6モジュールを作成し、/ patch es6-transpiler を使用して必要なパッケージ形式を出力します。次に、私は/または：

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

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

121
Mangled Deutz

初期

私も初めてbower initを使用しています。

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

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

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

その他の更新

ブラウザ化に使用したコマンド dflow aswindowglobal object

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

ブラウザ内でもrequireを使用することを好むため、これを変更したため、現在使用しています

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

そして、bower.moduleTypeをnodeに変更しましたbower .jsonファイル。

主な動機は、モジュール名にダッシュがある場合、たとえばプロジェクト flow-view の場合、camelizeのグローバル名flowView。

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

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

これは別のトピックですが、後者の利点を考慮することは本当に価値があります。私のpackage.jsonで使用するnpm.scripts.browserify属性を共有させてください

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

27
Gianluca Casati

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

main JavaScriptファイルで定義されているモジュールのタイプ。次の文字列の1つまたは配列になります。

  • globals：window.namespaceまたはthis.namespace構文を使用して、グローバル名前空間に追加するJavaScriptモジュール
  • AMD：AMDと互換性のあるJavaScriptモジュール、 RequireJS など、define()構文を使用
  • node：module.exports構文を使用して node および CommonJS と互換性のあるJavaScriptモジュール
  • es6： ECMAScript 6モジュール と互換性のあるJavaScriptモジュール、exportおよびimport構文を使用
  • yui： YUI Modules と互換性のあるJavaScriptモジュール、YUI.add()構文を使用

関連リンク： https://github.com/bower/spec/blob/master/json.md#moduletype

7
Wtower