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

钥匙要点

• > SystemJS和JSPM是可以用来克服JavaScript模块化的局限性的工具。 SystemJS是一个模块加载程序，可以在运行时以任何流行格式导入模块，而JSPM是构建在SystemJS之上的软件包管理器。他们共同管理软件包及其依赖项，从而可以更轻松地安装和加载依赖项。
> 使用JSPM和SystemJS设置项目的过程涉及创建目录，初始化NPM项目并在本地安装JSPM。设置后，JSPM和SystemJS可用于安装和管理来自不同源，transpile ES6代码的软件包，并处理依赖项。
JSPM也用作模块Bundler，将所有文件和库组合在一起，并将文件使用的模块系统转换为SystemJS样式模块。此过程对性能是有益的，应用于生产应用。
• >

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

>

安装为依赖项的外部模块

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

>

有关当前景观的概述，请参见：理解JavaScript模块：捆绑和transpliting
• >更重要的是，我们没有允许我们下载软件包并将其包含在应用程序中的软件包管理器。包装经理（例如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文件夹中窥视您，您将看到：

>

• github子目录
• npm子目录
SystemJS模块加载程序的主文件
JSPM创建GITHUB和NPM目录的原因是，它在这些注册表的顶部之上，只需使所需的NPM或GitHub软件包别名。此外，GitHub目录包含一个SystemJS插件，用于从GitHub加载JSON文件，NPM目录包含与Babel相关的软件包，我们将需要将ES6代码传输

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进行了呼叫。该模块返回一个任何其他消费模块都可以使用参数调用的函数。>
summarymodal.js：此文件使用ES6样式模块。它加载了Bootstrap的JavaScript库。然后，它导出一个接受一块逃脱的HTML的函数，并在将其显示在模态弹出窗口之前，然后将HTML文本删除。
• 。
display.js：此文件使用commonjs样式模块。它将jQuery和以上两个文件作为依赖项加载。它调用search.js暴露的方法获取结果，然后在UI上的HTML表中渲染这些数据。此外，它利用了SummaryModal.js所公开的方法在表上单击链接按钮时显示模态。
如前所述，SystemJS了解JavaScript中的所有模块系统。我们可以使用SystemJS加载上述所有三个文件。

>

要使这些脚本运行，我们需要在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文件中。这是更新的参考集：
>请注意，我们没有删除导入语句以加载模块display.js。该语句不再加载文件，而是加载了已在build.js文件中可用的SystemJS模块。

。

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

结论

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中起作用。这使您可以编写可以在客户端和服务器之间共享的代码。

>

Systemjs如何处理依赖项？

Systemjs通过其配置来处理依赖项。您可以在SystemJS配置中指定模块的路径和依赖关系。加载模块时，SystemJS也会自动加载其依赖项。

>

使用模块化JavaScript？

>模块化JavaScript有什么好处。它使您的代码更有条理，更易于管理。它使您可以在应用程序的不同部分重复使用代码。它还使测试您的代码更容易，因为可以独立测试每个模块。

如何配置Systemjs？

>

可以使用system.config（）方法配置Systemjs。此方法接受指定配置选项的对象。您可以配置的某些选项包括路径，地图，软件包和转板器。

>我可以将systemjs与其他JavaScript框架一起使用吗？

是的，可以与其他JavaScript框架一起使用SystemJS，例如角，反应和vue.js。它提供了一个通用模块加载程序，该加载器可以从任何这些框架中加载模块。

SystemJS的未来是什么？

Systemjs继续积极维护和开发。它是JavaScript生态系统的关键部分，尤其是对于需要通用模块加载程序的项目。随着JavaScript和Web技术的持续开发，SystemJS可能会继续发展以满足开发人员的需求。

以上是模块化JavaScript：SystemJS和JSPM的初学者指南的详细内容。更多信息请关注PHP中文网其他相关文章！