web-dev-qa-db-ja.com

パッケージマネージャー：Bower対jspm

Bowerjspm とどう違うのですか？ Bowerは SystemJSユニバーサルモジュールローダー に関するjspm機能を提供できますか？

bowerpackage-managersjspm
76
Lee Chee Kiam

JSPMはBowerよりもはるかに大きく、野心的なプロジェクトです。 Bowerには、Webからハードディスクに必要なソースファイルをダウンロードするという目的が1つだけあります。消費者としてのあなたにとって、bowerは何もしません。 bowerからスクリプトファイルを実行する場合は、それぞれにスクリプトタグを作成する必要があります。

一方、jspmはモジュールダウンローダーだけではありません。あなたが言及したデフォルトでsystemjsをダウンロードします。 SystemJSは、可能な限り https://whatwg.github.io/loader/ に密接に実装されます。実際、JSPMの作成者は、仕様プロセスに非常に積極的に参加しています。 systemjsを使用すると、今日では、ビルドせずにES6（ブラウザーでトランスコンパイルすることで）、CommonJS、またはAMDモジュールをブラウザーでロードできます。 ES6モジュールだけでなく、traceur/babeljs/TypeScriptでサポートされている他のすべてのES6機能。 jspm initの実行時に選択するコンパイラに応じて。 SystemJSはnode.jsとブラウザーで1：1で動作するため、アプリのユニットテストは簡単に実行できます。

また、本番環境に移行する必要がある場合に、バンドルをビルドできます（jspm build）。したがって、jspm（+ systemjs）がより強力なツールであることは明らかです。だから、経験則として：

  • すぐにjqueryを取得して、サーバーサイドのテンプレートHTMLに含める必要がありますか？通常のスクリプトタグを使用します。 Bowerは廃止されました。
  • 大きなJSアプリを構築する必要がありますか？ Webpackを使用してください。 JSPMはクリティカルマスに到達することができず、誰もがwebpackを実行しています。
100
Capaj

Capajの回答に追加するには：

小さなプロジェクトがある場合は、とにかくjspmで行ってください！それは未来です！ （誰が知っている、物事は変わりますが、これは良い方法です）。

小さなプロジェクトの使用：

$ jspm install jquery

次に、HTMLで：

    <script src="jspm_packages/system.js"></script><!-- required -->
    <script src='config.js'></script><!-- required -->
    <script type="module">
        System.import('path/to/your/main.js')
    </script>

次に、main.jsで：

import $ from 'jquery'; // ES6-style import
// do whatever with jQuery here.

CommonJS、AMD、またはES 6モジュール形式を使用できます。 JSPMはファイル内でそれらを自動検出します（ただし、同じファイル内で一致させることはできません）。

var $ = require('jquery'); // CommonJS-style import
// do whatever with jQuery here.

define(['jquery'], function($) { // AMD-style import
    // do whatever with jQuery here.
})
64
trusktr