javascript 模块_使用jspm把握JavaScript模块的未来
javascript 模块
JavaScript封装跨越两个世界：客户端和系统/服务器端。 长期以来，客户端JavaScript依赖关系管理和打包一直是Web开发的痛点，在野外使用了各种各样的零散解决方案。 在撰写本文时， ECMAScript 6 （ES6）仍处于标准预览中，它试图从这些解决方案中汲取最佳思想并将其融合到语言中。
jspm是一个渐进式框架，现在可以将ES6依赖项处理语法用于JavaScript。 jspm结合了：
jspm位于Babel和SystemJS之上，并以一致的语法处理它们，并通过npm和GitHub等注册表提供自动模块解析。 该框架还包括对CSS加载和开发服务器的支持。
本教程为您提供了jspm的实用介绍，并概述了该框架可以为您的项目提供什么。 对于上下文，我首先通过节点包管理器（npm）进行服务器端依赖项管理的快速示例。 然后，您将看到jspm如何在浏览器端提供可比的易用性以及其他好处。 请参阅下载以获取示例代码。
npm本地
您可能已经熟悉Node.js及其对JavaScript的应用，这是一种不受浏览器限制的通用语言。 您可以使用Node运行JavaScript文件，但是Node中几乎所有有趣的事情都是通过您必须包含的模块 （也称为dependencies ）发生的。 npm使在全局系统级别和本地项目级别上安装和控制服务器端依赖项变得非常容易。
如果您的系统上还没有Node.js和npm， 请立即安装它们。 安装后，您的全局路径上有两个命令： node和npm 。
您的项目是创建一个包含微调器的命令行应用程序，该微调器是一个动画图标，向用户显示处理正在进行中，请继续。 这种以前需要大量计算的功能已经简化为日常使用，现在作为节点模块存在。
通过运行npm install module-name -g将节点模块安装到全局上下文中，但是对于此应用程序，您不希望上下文是全局的。 相反，您希望为项目显式定义依赖关系并将其包含在项目中。 这样，您可以从版本控制中签出项目，并从项目本身内部安装依赖项，并且可以看到其中列出的依赖项。
因此，请改用package.json（一个在项目中控制npm的文件）来保持环境整洁。 清单1显示了您的应用程序的简单package.json。 将此文件放在您的项目的新文件夹的根目录中。
清单1.具有依赖关系的package.json
{
"name": "jspm-intro",
"preferGlobal": true,
"version": "1.0.0",
"author": "user",
"description": "JSPM Intro - Demo App",
"license": "",
"engines": {
"node": ">=0.10"
},
"scripts": {
"go": "node app-cl.js"
},
"dependencies": {
"cli-spinner": "0.2.2"
}
} 请注意，package.json中的dependencies项条目引用了cli-spinner模块，并为其指定了版本号。 （大多数JavaScript软件包在其npm页面上为您提供了最新版本，例如cli-spinner页面。）您还可以通过从命令行运行npm install package-name来获取当前版本。
要安装依赖项，请从命令行运行npm install 。 观看npm下载依赖项并将其放入/ node_modules。
还要在清单1中注意到scripts包含一个go命令。 在scripts属性中，可以在定义的npm上下文中运行任意命令。 因此，依赖项可用于node app-cl.js命令。 （/ node_modules目录在执行npm run-script命令期间放置在路径上。）
清单2显示了简单而深刻的app-cl.js程序。
清单2.在Node应用程序中要求和使用模块
"use strict";
var Spinner = require('cli-spinner').Spinner;
var spinner = new Spinner('This is gonna blow your mind... %s');
spinner.setSpinnerString('|/-\\');
spinner.start();
setTimeout(function() {
spinner.stop();s
}, 3000); 转到命令行并运行npm run-script go 。 您会看到微调器正在运行，它演示了干净的依赖项用法。
jspm用于网络应用程序
现在假设您正在编写一个Web应用程序，并希望包含jQuery 。 如果您有npm，则可以使用安装Spinner模块的相同方法来安装JQuery模块"jquery": "2.2.0"在package.json的dependencies部分中添加"jquery": "2.2.0" 。 现在进行添加，然后运行npm install将jQuery放在/ node_modules中。 但是，无论如何安装jQuery，都需要一种将jQuery模块放入Web应用程序的方法。
现在，假设您的Web应用程序有一个index.html页面，这就是您要使用jQuery的页面。 一种简单的方法是创建index.html文件，并通过<script>标记将jQuery文件包含在node_modules / jquery / dist中。 清单3显示了这种方法的示例。 （在演示应用程序中，此文件为index-script.html；请参见下载 。）
清单3.带有<script>标记的典型的老式index.html包括
<!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中的各种（可能是深层嵌套的）依赖项。 并且必须将包含与使用包分开。 这种方法还要求在全局名称空间中公开模块。
您不希望这种天真的，全局变量的方法。 相反，您想要一个很好的模块化包含，类似于Java™JAR和import语句，您可以使用类似于Java世界的Maven或Gradle的依赖项管理器进行管理。
“您可以在ES6中编写包含内容，并可以采用多种格式引入软件包，包括AMD，CommonJS，ES6和老式的全球包装。 ”
目前有几种语法上的模块化方法，其中CommonJS最近成为了焦点。 npm包使用CommonJS。 诸如Browserify之类的工具会将npm软件包转换为可浏览器使用的软件包。
jspm支持CommonJS，但进一步通过SystemJS支持即将到来的ES6 include语法。 SystemJS是一种元导入兼容性层。 （在ES6中， System对象将成为浏览器中的本机对象，这就是SystemJS的名称。）使用SystemJS时，您可以在ES6中编写包含内容，并可以采用多种格式引入软件包，包括AMD，CommonJS ，ES6和老式的全球包装。
现在，您将看到如何使用jspm来包含jQuery —具体地说，就是如何使用jspm将依赖项连接到app.js文件。
安装jspm
- 将jspm添加到您的项目。 您可以在package.json中的依赖项中手动编码该附加项，但是我想向您展示另一种方式。 转到命令行，然后输入
npm install jspm --save-dev。 此命令将jspm软件包添加到package.json的devDependencies字段中。devDependencies与依赖devDependencies工作原理相同，但仅用于开发工具，不用于相关应用程序的功能。 jspm仅用于您的构建，因此您不需要dependencies。 - 启用jspm命令。 再说一次，而不是全局安装jspm，而是使用npm保持环境整洁。 在
scripts字段中添加"jspm": "jspm"，然后放入命令提示符并运行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"包括告诉jspm从npm获取babel-core软件包。 Babel是jspm用来将ES6语法转换为如今的浏览器可以读取JavaScript的工具。
添加jQuery。 在命令行中，运行npm run-script jspm install jquery 。 在package.json中查找新条目： "jquery": "npm:jquery@^2.2.0" 。 您会看到相同的名称 ， 注册表 ， 模块名称和版本要求模式 。 jspm维护了一些通用要求的小型注册表，例如jQuery； 这就是从jquery转换为npm:jquery 。 对于不太常用的模块，在命令行上安装模块时，必须同时指定注册表和模块。
jspm为您准备好资产； 现在您已经准备好了如何使用它们。
现在，您可以将其作为模块导入，而不必在index.html中包含app.js文件。 但是首先，您必须包括几个支持文件：jspm为您创建的config.js文件和system.js文件，即SystemJS。 您将使用ES6语法来包含依赖项，而SystemJS则使您可以在野外使用的各种程序包中进行依赖。
清单4显示了一个使用jspm生成的build的index.html文件。 不用担心多余的内容； 您将很快看到如何将其捆绑用于生产。
清单4.使用jspm生成的build的index.html
<!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文件，其中包含：
import $ from 'jquery';
&("body").append("<div>Ground control to major Tom.</div>"); 注意import $ from 'jquery'; 进口。 那是一个命名的import 。 您可以通过几种不同的方式使用ES6语法来获取软件包。 在这种情况下，您将导入默认模块经典美元符号。
导出功能
进一步了解ES6语法。 在ES6中，一个模块可以定义多个导出。 因此，在您的app.js文件中，您可以创建一个导出函数：
import & from 'jquery';
export function init(){
&("body").append("<div>Good morning!.</div>");
&("body").append("<div>How are you?.</div>"); 在index.html中，您可以使用此导出，如清单5所示。请注意，我使用.then(...) promise（类似于AMD语法）来定义回调函数，因为模块是异步加载的。
清单5.使用导出的模块
<script>
System.import('./app').then(function(app){
app.init();
});
</script>CSS和其他资产的加载程序插件
假设您有一些CSS文件要合并到应用程序中。 首先，从命令行运行npm run jspm install css=npm:jspm-loader-css ，以安装名为css的jspm CSS loader。
创建一个包含以下内容的简单app.css文件：
div {
background-color: red;
} 现在，您可以通过将以下行添加到app.css中来将CSS 导入到JavaScript中 ： import './app.css!'; 。 请注意，CSS也在评估时（即，脚本在浏览器中运行时）也已加载，因此，如果需要，您可以根据需要灵活地按需加载CSS模块。
您可以通过npm run jspm install scss=sass获得CSS预处理器SASS的相同结果。 请参阅与SystemJS和jspm兼容的加载程序插件的完整列表 。
使用jspm开发服务器进行测试
要测试该应用程序，您需要一种将文件托管在服务器中的方法，因为浏览器无法从本地磁盘加载程序包。 您可以随意使用NGINX或Apache或Express服务器。 但是您正在运行jspm，因此可以安装和使用jspm dev服务器。
作为实用程序，jspm dev服务器倾向于全局安装。 全局安装对于这种依赖性很有意义，因为在登台，测试或生产等其他环境中，该应用程序很可能由特定服务器托管。 运行npm install -g jspm-server 。 在项目根目录下键入jspm-server 。 等待jspm弹出打开浏览器窗口，然后将您定向到http://127.0.0.1:8080/，该应用程序正在运行并向您问候。
请注意，jspm dev服务器支持请求代理。 因此，如果您要集成一个后端服务，则可以在开发过程中将某些URI路径（例如/api ）映射到后端。
捆绑生产
您可以捆绑依赖树以进行生产。 如果转到命令行并运行npm run jspm bundle app --inject ，jspm将基于app.js入口点将整个依赖关系图提取为单个文件build.js。 然后，您可以一次加载所有内容，而不是在系统遇到包含内容时异步加载所有内容。
此时，您可以包括build.js而不是app.js，如下所示： <script src="build.js"></script> 。 但是，您仍然需要system.js和config.js。
结论
使用jspm的伟大之处在于，向前看，浏览器将原生获得对SystemJS语法的支持，并且您的应用程序将准备就绪。 您可以使用面向未来的语法来利用广泛的现有包，并在此过程中利用诸如CSS包含和开发服务器之类的构建工具。 尽管SystemJS可能在很大程度上被本机浏览器支持所取代，但是jspm的打包和捆绑方面仍然有用且必要。
翻译自: https://www.ibm.com/developerworks/opensource/library/wa-use-jspm-javascript-modules/index.html
javascript 模块