包管理器：Bower vs jspm

Question

Bower 与 jspm 有何不同？ Bower 能否提供关于SystemJS universal module loader 的jspm 功能？

Answer 1

JSPM 是比 Bower 更大、更雄心勃勃的项目。 Bower 只有一个目的——将您需要的源文件从 Web 下载到硬盘上。作为消费者，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。

Answer 2

补充 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.
})