简介
@ngstarter/systemjs-extension是一个用于Angular等web应用开发的npm包，它可以帮助开发者更加方便快捷地使用systemjs模块加载器。本篇文章将详细介绍如何使用该npm包，包括安装、使用、配置等内容。
安装
npm安装
在项目中运行以下命令可以安装这个npm包：
npm install @ngstarter/systemjs-extension --save
下载
该npm包也可以从Github上下载，在项目根目录下创建systemjs-extension.js文件，并在其中添加以下代码：
-- -------------------- ---- -------
------ ----------------- ---- --------------------------------
------------------------------
------ -
-----------
--
--------- -
-----------------
-
---左侧的文本编辑器中是systemjs-extension.js文件的示例代码，如有需要可进行参考。
使用
在使用该npm包之前，需要先安装与之相应的依赖，包括：systemjs、rxjs、@angular/core、@angular/common等。
在使用该npm包之前，需要确保你的项目中包含了systemjs模块加载器。如果你没有使用过systemjs模块加载器，请先查阅官方文档。
下面是该npm包的使用方法，以Angular为例：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------------- - ---- --------------------------------
-----------
------------- -
------------
--
-------- -
-------------
--
---------- --------------------
---------- --------------
--
------ ----- --------- - -上面代码中，我们使用了SystemJsExtension服务，并将其添加到了提供商数组中，以此来加载我们指定的库。
我们可以使用SystemJsExtension的 load方法来单独加载一个模块，
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- --------------------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------------------- ------------------ ------------------ -
-------------
------------------------------------------- -- -
-----------------
-------------------------------- -- ------
---
-
-该方法接受一个参数 —— 希望加载的模块的名称。在模块加载成功后，我们可以执行一些相应的操作。
配置
systemjs-extension.js文件用于配置加载器，该文件包含两个主要属性：paths和packages。
paths：设置模块的位置并映射到URL，使用键值对表示。比如，在下面的示例中，我们已经在本地存储了一个abc.js文件，并且我们想为其配置一个路径 ——/src/app。
-- -------------------- ---- -------
------ ----------------- ---- --------------------------------
------------------------------
------ -
-------- ------------
--
--------- -
-- -------------
-
---上述代码中：abc/*表示我们要加载的模块名称，/src/app/*表示服务端的URL地址。
packages：将包名键映射到其对应的URL和主文件，使用键值对表示。以下是我们设置Angular的示例配置：
-- -------------------- ---- -------
------ ----------------- ---- --------------------------------
------------------------------
------ -
-- ----------
--
--------- -
---------------- - ----- -------------------------- ----------------- ---- --
------------------ - ----- ---------------------------- ----------------- ---- --
-------------------- - ----- ------------------------------ ----------------- ---- --
---------------------------- - ----- -------------------------------------- ----------------- ---- --
------------------------------------ - ----- ---------------------------------------------- ----------------- ---- -
-
---总结
@ngstarter/systemjs-extension是一个非常棒的npm包，它可以大大提高我们在web应用开发中使用systemjs模块加载器的效率。本篇文章简要介绍了@ngstarter/systemjs-extension的安装、使用和配置方法，希望对读者有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e24489f