包管理器：Bower vs jspm

Posted 2023-02-22

【中文标题】包管理器：Bower vs jspm

【英文标题】：Package Manager: Bower vs jspm

【发布时间】：2014-10-14 12:35:54

【问题描述】：

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

【问题讨论】：

You don't need bower.

【参考方案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。

【讨论】：

为了更准确一点，SystemJS 本身使用 ES6 模块 shim，因此如果您只需要 ES6 模块支持，您可以跳过 SJS（除非您想要它具有的其他功能）。

@Capaj，我对 SystemJS 很感兴趣，但它似乎没有应有的势头。其他一些（可能是Webpack？）是否也提供构建作为可选功能？我的主要目标是使用 ES6 模块语法和 shim 节点和浏览器来处理它。次要目标：提供的构建功能是可选的。第三：支持未来的精彩：2ality.com/2013/11/es6-modules-browsers.html

"Bower 只有一个目的——将您需要的源文件从网络下载到您的硬盘。" 这就是为什么它真的很好，因为它只做一项工作。

@tugberk 是的，但是我们作为 Web 开发人员的工作并没有就此结束，不是吗？我们需要加载该第 3 方库并使用它。这就是 JSPM 擅长并击败所有其他替代方案的地方。尤其是最流行的 webpack。

【参考方案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.
)

【讨论】：

虽然我很高兴你对jspm如此热情，但我真的认为对于需要将jquery添加到html文档的人来说，他们最好使用普通的脚本标签。

JQuery 在这种情况下只是一个例子，所以我认为您的评论无效。我必须说我喜欢答案的能量——如此兴奋和快乐，让我想立即使用 jspm。 :-)

重点不在于 .是的，我们可以只添加 jquery 作为脚本。但是，当您在 JS 中具有多个带有 import 语句的模块依赖项时，就会出现令人着迷的东西。那么 system.js 所需要的就是使用 config.js 配置包，并在 javascript 依赖链中提及 import 语句。

我想补充一点，var $ = require('jquery'); 是 CommonJS 风格的导入，而不是 AMD 风格的。