使用 jspm 把握 JavaScript 模块的未来（2）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-11-18 19:02 | 只看该作者

使用 jspm 把握 JavaScript 模块的未来（2）

用于 Web 应用程序的 jspm假设您在编写一个 Web 应用程序，并想要包含  。如果您有 npm，那么可以按照安装 spinner       模块的相同方法来安装 JQuery 模块：将 "jquery": "2.2.0" 添加到 package.json 的       dependencies 部分。现在执行该添加，然后通过运行 npm install 将 jQuery 放入       /node_modules。但是，不管您如何安装 jQuery，都需要想办法将 jQuery 模块放入您的 Web 应用程序中。
下面假设您的 Web 应用程序有一个 index.html 页面，您要从该页面使用 jQuery。一种简单的方法就是创建 index.html 文件，并通过一个       <script> 标记包含 node_modules/jquery/dist 中的 jQuery 文件。清单 3       展示了一个该方法示例。（在演示应用程序中，该文件是 index-script.html；参见部分。）
清单 3. 包含 <script> 标记的典型旧式       index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>JSPM Intro</title>
  <meta name="description" content="JSPM Intro">
  <meta name="author" content="MTyson">
</head>

<body>
  <script src="node_modules/jquery/dist/jquery.js"></script>
  <script src="app.js"></script>
</body>
</html>

下面假设在 app.js 中，您想将一些内容附加到文档主体。可以使用 &("body").append("<div>Ground control to       major Tom.</div>");，因为您已经包含了 jQuery 文件，因而可以访问 $ 全局变量。
该方法虽然有效，但有诸多缺陷，特别在某个方法变得更复杂并依赖于更复杂的模块时。您需要用 HTML 写出各种（可能深入嵌套的）依赖项。此外，您必须将 include       语句与程序包的使用分开。该方法还需要在全局命名空间中公开模块。
您不会想用以前的这种简单的全局变量方法。而是想用模块化的 include 语句，该语句类似于 Java™ JARs 和 import       语句，可使用类似于 Java world 的或的依赖项管理器对其进行管理。

“您可以在 ES6 中编写 include 语句，以各种格式导入程序包，包括 AMD、CommonJS、ES6 和旧式全局封装。”

有许多实现模块化的语法方法可供使用，最近占据主导地位。npm 包使用了 CommonJS。等工具可将 npm 包转化为浏览器可使用的包。
jspm 支持 CommonJS，但更进一步通过 SystemJS 支持未来的 ES6 include 语法。SystemJS 是一种 meta-import 兼容层。（在 ES6 中，System 对象将是浏览器中的一个原生对象，这是 SystemJS 获取其名称的方式。）在使用 SystemJS 时，可以在 ES6 中编写 include 语句，以各种格式导入程序包，包括 AMD、CommonJS、ES6 和旧式全局封装。
下面您将了解如何使用 jspm 包含 jQuery — 具体地讲，将了解如何使用 jspm 将依赖项连接到 app.js 文件。
安装 jspm

将 jspm 添加到您的项目中。您可以手动编码，将其添加到 package.json 中的依赖项中，但我想向您展示另一种方法。转到命令行并键入 npm install jspm --save-dev。该命令将 jspm 包添加到 package.json 中的 devDependencies 字段。devDependencies 与依赖项的工作原理一样，但仅用于开发工具，而不是运行涉及的应用程序。jspm 仅用于您的内部版本，因此 dependencies 中不需要它。
启用 jspm 命令。同样不用全局安装 jspm，而是使用 npm 保持项目结构一目了然。将 "jspm": "jspm" 添加到 scripts 字段，然后放入命令提示符中，并运行 npm run-script jspm init。
接受 jspm 问题的所有默认设置。jspm 会为您创建一个 config.js 文件（该文件主要创建了一个依赖关系图），更新 package.json 并创建一个 jspm_modules 目录。

package.json jspm 条目您可以在 package.json 中看到，在安装 jspm 后添加了一个 jspm 对象。该对象中嵌套了新的       devDependencies，其功能类似于其他 npm 依赖项，但仅用于 jspm。jspm 让所有内容保持一目了然。请注意，jspm       依赖项语法稍有不同：程序包名称带有 npm 前缀，如 "npm:babel-core@^5.8.24" 中所示。使用该前缀是因为       jspm 支持多个注册表，npm 是其中之一。（另一个内置注册表是 GitHub。jspm 的注册表系统是可扩展的，因此您可以定义新的注册表终结点 —       例如，为了使用某个特定于组织的注册表。）"npm:babel-core@^5.8.24" include 告诉 jspm 从 npm 获取       babel-core 包。jspm 使用 Babel 将 ES6 语法转译为当今的浏览器可以理解的 JavaScript。
加入 jQuery。在命令行中，运行 npm run-script jspm install jquery。在 package.json       中找到新条目："jquery":       "npm:jquery@^2.2.0"。您可以看到相同的名称、注册表、模块名称、版本要求       模式。jspm 维护着一个具有通用要求（比如 jQuery）的小注册表；它通过这种方式知道要从 jquery 转换到       npm:jquery。对于不那么通用的模块，在命令行中安装模块时，一定要指定注册表和模块。
jspm 为您准备好了资源；下面我们准备了解如何使用它们。
与其将 app.js 文件包含在 index.html 中，您现在就可以将其作为模块导入。但您必须首先包含两个支持文件：jspm 为您创建的 config.js 文件和       system.js 文件（即 SystemJS）。我们将使用 ES6 语法包含依赖项，SystemJS 支持您跨各种程序包实现此目的。
清单 4 展示的 index.html 文件使用了 jspm 生成的内部版本。不用管额外的 include 语句；待会儿您将看到如何将代码捆绑投入生产。
清单 4. 使用 jspm 生产的内部版本的       index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

   <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>JSPM Intro</title>
  <meta name="description" content="JSPM Intro">
  <meta name="author" content="MTyson">

  <head>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
   System.import('./app');
</script>
  </head>
</head>

<body>
</body>
</html>

创建一个包含以下内容的 app.js 文件：

1
2
3

import $ from 'jquery';

&("body").append("<div>Ground control to major Tom.</div>");

注意 import $ from 'jquery'; 导入。这是一个指定导入。您可以采用几种不同的方式使用 ES6 语法来要求一个程序包。在本例中，我们导入了默认模块，使用了经典的 $ 符号。
导出函数让我们来更深入地查看一下 ES6 语法。在 ES6 中，一个模块可以定义多个导出。因此在您的 app.js 文件中，可以创建一个导出函数：

1
2
3
4

import & from 'jquery';
export function init(){
&("body").append("<div>Good morning!.</div>");
&("body").append("<div>How are you?.</div>");

在 index.html 文件中，可以利用清单 5 中所示的导出。请注意，我使用了一个 .then(...) 约定语句（类似于 AMD 语法）来定义一个回调函数，因为模块是异步加载的。
清单 5. 使用一个导出模块

1
2
3
4
5

面向 CSS 和其他资源的 Loader 插件假设您有一些 CSS 文件想要合并到应用程序中。首先从命令行运行 npm run jspm install css=npm:jspm-loader-css，安装一个名为 css 的 jspm CSS Loader。
使用以下内容创建一个简单的 app.css 文件：

1
2
3

div {
background-color: red;
}

接下来您可以通过将以下代码行添加到 app.css 来将 CSS 导入您的 JavaScript：import       './app.css!';。请注意，CSS 也是在评估时（即脚本在浏览器中运行时）加载的，因此您可以巧妙地按需加载 CSS 模块。
可使用 npm run jspm install scss=sass 为 CSS 的预处理器 SASS 实现同样的结果。参见与 SystemJS 和       jspm 兼容的 loader 插件的  。
使用 jspm 开发服务器进行测试如要测试该应用程序，需要想办法将文件托管在一台服务器中，因为浏览器无法从本地磁盘加载程序包。您可以使用 NGINX 或 Apache 或 Express       服务器（哪一个都行）。但因为您在运行 jspm，所以可以安装并使用 jspm 开发服务器。
作为一个实用工具，jspm 开发服务器更倾向于全局安装。全局安装对于此依赖项很有意义，因为在另一个环境中，比如暂存、测试或生产环境中，应用程序可能会由特定服务器托管。运行       npm install -g jspm-server。在项目根处键入 jspm-server。等待 jspm       弹出一个浏览器窗口并将您导向 http://127.0.0.1:8080/，应用程序在此处运行。
请注意，jspm 开发服务器支持请求代理。因此，如果您有一个后端服务要集成，可在开发期间将某些 URI 路径（例如 /api）映射到后端。
捆绑投入生产HTTP/2 和捆绑目前，您仍然需要捆绑包来实现最佳性能。但 ES6 语法被设计为在          上下文内有效，HTTP/2 会在协议级别处理多个文件加载优化。

您可以捆绑依赖关系树以便投入生产。如果转到命令行并运行 npm run jspm bundle app --inject，jspm 会基于 app.js       入口点提取整个依赖图，深入到某个 build.js 文件。然后在系统遇到 include 语句时，您可以一举加载所有内容，而不是异步加载它们。
那时您可以像这样包含 build.js 而非 app.js：<script       src="build.js"></script>。不过您仍然会需要 system.js 和 config.js。
结束语使用 jspm 的一个好处在于，未来浏览器本身会支持 SystemJS 语法，而且您的应用程序将准备就绪。您可以利用使用顺应未来的语法的各种现有捆绑包，并在此过程中利用 CSS       inclusion 和开发服务器等构建工具。尽管 SystemJS 可能会在很大程度上被原生浏览器支持所取代，jspm 的封装和捆绑特性仍会有用且有必要。

收藏分享评分

回复引用

订阅 TOP

返回列表