模块化JavaScript：SystemJS和JSPM的初学者指南-js教程-PHP中文网

钥匙要点

如果您还没有，则需要安装node.js。这样做的一种特别简单的方法是使用版本管理器（例如NVM），并在此快速提示中详细介绍。使用节点启动并运行后，您可以通过从命令行中运行以下内容来在全球安装JSPM：

Systemjs和WebPack都是模块捆绑包，但它们具有一些关键差异。 SystemJS是一个通用的动态模块加载程序，在浏览器和NODEJS中加载ES6模块，AMD，CONCORJS和全局脚本。它更像是一个模块装载机，而不是捆绑装载机。另一方面，WebPack是现代JavaScript应用程序的静态模块捆绑包。它构建了一个依赖关系图，其中包含每个模块您的应用程序需求，并将它们包装到一个或多个捆绑中。

Systemjs如何处理依赖项？

首页

web前端

js教程

模块化JavaScript：SystemJS和JSPM的初学者指南

William Shakespeare

Feb 18, 2025 am 11:28 AM

模块化JavaScript：SystemJS和JSPM的初学者指南

钥匙要点

> SystemJS和JSPM是可以用来克服JavaScript模块化的局限性的工具。 SystemJS是一个模块加载程序，可以在运行时以任何流行格式导入模块，而JSPM是构建在SystemJS之上的软件包管理器。他们共同管理软件包及其依赖项，从而可以更轻松地安装和加载依赖项。
>

本文由阿德里安·桑杜（Adrian Sandu）和马克·布朗（Mark Brown）审查。感谢SitePoint所有的同行评审员制作SitePoint内容的最佳状态！在过去的几年中，JavaScript编程语言在流行中爆炸了。它已成为开发丰富的Web应用程序以及混合移动应用程序的首选语言。随着JavaScript项目的越来越复杂，开发人员正在经历该语言的新要求。其中之一是模块化。 据我所知，必须实现模块化的两个方面：> 我们作者的模块

安装为依赖项的外部模块

ES6将标准模块语法带到JavaScript和加载程序规范。这是向前迈出的好一步，但是在写作时，没有浏览器可以在本机上加载ES6模块。这意味着，如果您今天想使用模块，则需要使用模块bundler。

>更重要的是，我们没有允许我们下载软件包并将其包含在应用程序中的软件包管理器。包装经理（例如Bower和NPM）帮助我们下载前端依赖项而无需访问项目的网站，但这是

在本文中，我们将看到如何使用JSPM和SystemJ来克服这些问题。

什么是JSPM和SystemJS？

> JavaScript软件包管理器（又称JSPM）是一个软件包管理器，可在SystemJS Universal Module Loader的顶部工作。它不是一个拥有自己的规则集的全新软件包管理器，而是在现有软件包源之上起作用。开箱即用，它可以与GitHub和NPM一起使用。由于大多数基于Bower的软件包都是基于GitHub的，因此我们也可以使用JSPM安装这些软件包。它具有一个注册表，该注册表列出了大多数常用的前端软件包，以便于安装。像NPM一样，它可以用来将包裹作为安装过程中的开发和生产软件包区分。

> SystemJS是一个模块加载程序，可以在运行时以任何流行的格式导入模块（Commonjs，umd，amd，es6）。它建立在ES6模块装载机多填充的顶部，并且足够聪明，可以检测使用的格式并适当地处理它。 SystemJ还可以使用插件将ES6代码（带有Babel或Traceur）或其他语言（例如TypeScript和Coffeescript）。在导入模块之前，您可以在system.config（{...}）中配置这些东西。

> JSPM使用SystemJS来管理软件包及其依赖项，因此我们不必担心将软件包以正确的顺序加载。

>现在我们知道了JSPM和SystemJ是什么，让我们看看如何使用它们。>

设置我们的环境

如果您还没有，则需要安装node.js。这样做的一种特别简单的方法是使用版本管理器（例如NVM），并在此快速提示中详细介绍。使用节点启动并运行后，您可以通过从命令行中运行以下内容来在全球安装JSPM：

现在我们可以使用JSPM命令行接口。让我们设置一个项目：

<span>npm install -g jspm
</span>

登录后复制

这将创建一个名为new-prok的目录，将NPM项目初始化并在本地安装JSPM。这是推荐的做事方法，因为它锁定了JSPM版本的项目，并确保升级到全局JSPM不会改变您的应用程序的行为。

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

登录后复制

>这种方法的另一个优点是，如果您的项目通过连续集成构建部署，则可以配置构建过程以使用本地JSPM软件包，而不必在服务器上全球安装JSPM。

>您可以使用JSPM -V确认本地版本。

在项目中使用JSPM，运行以下命令：>

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

登录后复制

>您将提示您进行多个设置，hit Enter接受默认值或键入其他值以更改它们。以下屏幕截图显示了一个使用默认设置执行命令的实例：>

jspm init

登录后复制

>目录结构和配置

这将在项目根部创建一个名为config.js的文件，以及一个名为jspm_packages的文件夹。如果您在JSPM_PACKAGES文件夹中窥视您，您将看到：

config.js文件主要用于Systemjs。如果您打开它，您会发现它具有来自不同来源的软件包，Babel的选项和包装的名称地图的配置选项，以使其易于引用它们。使用JSPM安装新软件包时，此文件将自动更新。

该命令还更新package.json文件，并为JSPM添加了一个部分。带有Init命令安装的Babel软件包被添加到项目的DEVDEDEDIES部分中。>

>使用或不带有s -Save选项的JSPM命令安装的任何新软件包都会添加到TheDepentencies部分，因此它成为生产依赖性。使用-save-dev选项安装使依赖关系成为开发时间依赖关系，并将其保存到DevDepentencies部分。最后，JSPM为使用JSPM命令安装的每个软件包的config.js文件的地图部分添加了一个条目。映射名称可用于将库加载到整个项目中的任何JavaScript文件中。任何软件包依赖项也将添加到地图部分。以下是config.js文件的地图部分的片段，该片段显示了如何映射jQuery和jQuery-UI的软件包以及如何定义依赖关系：>

作为一个兴趣点，您也可以在安装模块时自动生成这些映射：

<span>npm install -g jspm
</span>

登录后复制

这将使您可以在应用程序中的其他位置编写以下内容：

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

登录后复制

JSPM和SystemJS在ACTION

为了陪同本文，我制作了一个简单的Wikipedia搜索样本。您可以在此处找到GitHub回购。它是使用JSPM Init命令的默认选项进行设置的，因此它将Babel用作ES6 Transpiler。它还使用使用JSPM安装的库和引导程序。由于Bootstrap需要jQuery，JSPM在加载Bootstrap之前在Config.js文件中创建一个映射：

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

登录后复制

<span>npm install -g jspm
</span>

登录后复制

>回购建议的名称，它查询了Wikipedia搜索API并在视图中显示收到的数据。它使用jQuery的$ .ajax（）来呼叫API，在页面上显示结果，并具有在模态弹出窗口中显示文章片段的链接。该示例在“脚本”文件夹下有三个JavaScript文件：

> search.js：此文件使用AMD样式模块。它是加载jQuery作为依赖项的加载，并对Wikipedia搜索API进行了呼叫。该模块返回一个任何其他消费模块都可以使用参数调用的函数。>
。

要使这些脚本运行，我们需要在HTML页面上加载System.js和Config.js。之后，我们将使用SystemJS模块加载程序加载Display.js文件。由于此文件指的是存储库中的其他文件，并且这些文件加载了所需的库，因此我们不需要加载任何其他文件。>

Systemjs使用Babel即时将ES6文件转移，并将其运行在浏览器中。这是一个（略微简化的）演示，说明了这是什么样的：

<span>mkdir new-project && cd new-project
</span><span>npm init -y
</span><span>npm install jspm --save-dev
</span>

登录后复制

>但是，飞行对性能不利，不应在生产应用中使用。不要忘记JSPM是一个模块捆绑器，所以让我们捆绑。>

我们可以使用以下命令为整个应用程序创建一个捆绑包：>

此命令执行以下操作：

>将所有文件和库组合在一个名为build.js

$ jspm <span>-v
</span><span>0.16.34
</span>Running against <span>local jspm install.
</span>

登录后复制

的单个文件中

>将文件使用的模块系统转换为SystemJS样式模块

现在，我们需要将build.js文件加载到index.html文件中。这是更新的参考集：

。

>您可以按照项目的回复文件中的说明进行操作。您可以在开发人员工具中的单个文件中浏览代码并通过它们进行调试。

结论

JSPM和SystemJS的组合提供了一种统一的安装和加载依赖性方法。该工具不仅使管理依赖项的工作更加容易，而且还为当今浏览器上的未来模块系统打开了大门。正如我已经证明的那样，JSPM易于设置和使用，这两个原因有助于其日益普及。

您是否在项目中使用JSPM？为什么？为什么不呢？在下面的评论中让我知道。

经常询问有关模块化JavaScript，Systemjs和JSPM

的问题（常见问题解答） > SystemJS和WebPack之间的关键差异是什么？

Systemjs和WebPack都是模块捆绑包，但它们具有一些关键差异。 SystemJS是一个通用的动态模块加载程序，在浏览器和NODEJS中加载ES6模块，AMD，CONCORJS和全局脚本。它更像是一个模块装载机，而不是捆绑装载机。另一方面，WebPack是现代JavaScript应用程序的静态模块捆绑包。它构建了一个依赖关系图，其中包含每个模块您的应用程序需求，并将它们包装到一个或多个捆绑中。

>如何安装SystemJS？

Systemjs可以通过NPM安装。您可以使用以下命令将其安装：NPM安装Systemjs。安装后，您可以使用'Systemjs''的导入{System}将其导入项目。

> JSPM在模块化JavaScript中的作用是什么？ Systemjs的软件包管理器。它简化了安装和管理软件包的过程。它还提供了一种从NPM，GitHub和其他来源安装软件包的统一方法。 JSPM还可以处理转滤，允许您在ES6或Typescript中编写代码，并自动将其转移到ES5。您可以使用system.import（）方法。此方法返回了解决模块的承诺。以下是一个示例：system.import（'path/to/to/module.js'）。然后（function（module）{/ *使用module */}）。

我可以将systemjs与node.js一起使用吗？是的，可以与node.js一起使用systemjs。它提供了一个通用模块加载程序，可在浏览器和node.js中起作用。这使您可以编写可以在客户端和服务器之间共享的代码。