🦄 2024 独立开发者训练营,一起创业!查看介绍 / 立即报名(剩余11个优惠名额) →

使用 ECMAScript 2015(ES6)模块 - jspm

你可以把应用分割成小部分,每个小部分就是应用的一个模块,模块之间可以相互去使用。AMD,CommonJS 这些都是用在 JavaScript 上的模块格式。问题是模块格式太多了,你家用这种格式,另一家用另外一种格式,你自己也想选择一种格式,用不同格式创建的模块之间挺难用到一块儿。现在好了,模块格式已经有了标准,就是 ECMAScript 2015(ES6) 提供的模块写法。

你现在创建的 JavaScript 应用,就可以使用这种标准化的模块格式了。不过现在我们需要一种方法,可以让不同格式的模块能用到一块儿,因为你的项目很可能会用到第三方的东西,这些东西可能用的是不同的模块格式创建的,你不能等所有的东西都按照这套新的标准重新写一次。这就是 jspm 做的事,它是基于 SystemJS 创建的。你可以使用 ES6 的标准,导入模块或者创建自己的模块,jspm 可以帮你解决不同格式的问题。

jspm 还是一个包管理工具,可以安装来自不同地方的包,比如 npm,github,或者你自己定义的位置。

安装 JSPM

打开命令行工具,Windows 上用 Powershell,Mac 上用终端,确定你安装了 npm,然后执行:

npm install jspm -g

完成以后,测试一下 jspm 是否有效,输入:

jspm

创建项目

下面去创建一个简单的项目,理解一下 jspm 的作用,还有 ES6 模块。

# 创建目录
cd ~/desktop
mkdir ninghao-workflow
cd ninghao-workflow

# 创建 package.json 
npm init

# 本地安装 jspm
npm install jspm --save-dev

# 创建 config.js
jspm init

执行 jspm init 以后,会问你一些问题,一路回车。完成以后,项目的目录下面会有下面这些东西:

config.js    package.json    jspm_packages    node_modules

用编辑器打开这个目录,然后再去创建一个 index.html 文件,下面是文件里的内容:

<!DOCTYPE html>
<html lang="zh-hans">
<head>
  <meta charset="UTF-8">
  <title>ninghao.net</title>
</head>
<body>
  <script src="https://ninghao.net/jspm_packages/system.js"></script>
  <script src="https://ninghao.net/config.js"></script>
  <script>
    System.import('main');
  </script>
</body>
</html>

在页面上链接了 system.js ,config.js ,另外还用了一个 System.import 导入了 main.js 这个模块,这里可以不用文件的扩展名 。下面去创建这个 main.js ,往里添加点东西:

'use strict';

console.log( 'ninghao.net' );

export default {};

正常的话,你在浏览器的控制台上应该可以看到输出的东西。我们也可以使用 browser-sync 去给项目创建一个服务器。

browser-sync start --server --no-notify --files 'index.html, *.js'

安装包

你可以使用 jspm 安装来自 npm ,github 上的东西:

# 安装 npm 上的 underscore
jspm install npm:underscore

# 安装 github 上 components 的 jquery
jspm install github:components/jquery

jspm 有一个 registry ,里面定义了一些常用包的简单形式,比如你想安装 jquery ,可以直接执行:

jspm install jquery

使用包

在项目的下面,再去创建一个 js 文件,名字是 fruit.js :

'use strict';

import $ from 'jquery';

export function booth() {
  $('body').text('苹果 桔子 梨');
}

在这个文件里,使用了 ES6 的模块格式,用 import 导入了 jquery ,这样你就可以去使用 jquery 提供的功能了。我又定义了一个叫 booth 的函数,它里面用到了 jquery ,在页面上显示一些水果图标,注意函数前面用了 export ,意思是可以导出这个模块提供的东西,这里导出的就是 booth 这个函数。

打开 main.js ,我们可以导入 fruit.js 这个模块:

import { booth } from 'fruit';

导入以后,可以执行一下来自 fruit.js 里的,被导出的 booth 这个函数:

booth();

正常的话,在浏览器上会显示一堆水果。

打包

jspm 也有打包的功能,比如我们去打包一下 main.js 这个模块:

jspm bundle main build.js --inject

意思是把 main.js 这个模块打个包,变成 build.js 。

评论

ES6 神马的太爽了

另外,ES7更加爽

月松给我们介绍介绍。

有文档的了,大家看文档就好了

哇擦,ES6都还没普及,7都出来了?

现在可以有啥用啥。在 React 介绍的视频里,会用到 ES6 的一些东西。

意思React和flux教程即将闪亮登场了咯?

flux模式有很多问题,我们用redux,react+redux

月松得帮我们介绍一下,哈哈。我看一大堆跟 react, flux 相关的东西。

教程的话我没什么好推荐的,我就看的官方文档,和github上的代码示例,加上一些实践,就这样了

6基本是定稿了,就等着各个浏览器去实现,7的话还在草案中,不过一些语法定了。现在为止几乎还没有浏览器支持,所以我们利用工具把我们写的ES6代码编译成ES5,既然是编译成ES5,那么我们用6还是用7是完全不受影响的。babel就是我们经常用的编译工具,而jspm或者webpack等工具集成了babel,所以在用jspm或者webpack的时候可以使用ES6

所以说,能不能用ES6只是跟有没集成babel有关,跟什么react,jspm等等没有任何关系。只要是集成了babel,在任何地方都可以用ES6

因为需要一个模块加载的东西,所以选择先用一下 jspm ,因为它基于 SystemJS 这个东西,可以兼容不同格式的模块。

模块加载方面,webpack比jspm更加完善,jspm支持的webpack都支持,包括CommonJs、AMD、global,还有依赖注入等等

哦,明白了。暂时先用着 jspm ,我再试试 webpack 。

受教啦月松,我得去看看babel……

做了几个简单的小视频,到时可以看一下。

去了babeljs.io,主菜单第一个就是先学习ES2015....

录了一些 es6 新功能的介绍,到时看一下,应该会有帮助 。

罗雀:这本书可以在线看:leanpub.com/understandinges6

哇哦,不错。谢谢!!

flux模式有很多问题,我们用redux,react+redux

index.html  中的两个js的引入路径可以改一下, 新手可能直接复制代码就运行了

<script src="http://ninghao.net/%3Cstrong%3Ejspm_packages/system.js%3C/strong%3E"></s...
<script src="http://ninghao.net/%3Cstrong%3Econfig.js%3C/strong%3E"></script>这二个是什么回事。乱码?????

咦,还真是来。

亲,看好你本地的路径有jspm_packages\system.js文件的+config.js文件 替换就可以了。

npm install jspm --save-dev
出现下面的错误!

npm WARN package.json ninghao-workflow@1.0.0 No description
npm WARN package.json ninghao-workflow@1.0.0 No repository field.
npm WARN package.json ninghao-workflow@1.0.0 No README data

booth(); 这个在哪里执行啊!

您稍等,最近会有个相关的视频 :)

'use strict';
import { booth } from 'fruit';
console.log( 'ninghao.net' );
booth();
export default {};

jspm bundle main build.js --inject
Building the bundle tree for main...

err Error on fetch for main.js at file:///Users/david/Desktop/ninghao-workflow/main.js
Error: ENOENT: no such file or directory, open '/Users/david/Desktop/ninghao-workflow/main.js'
at Error (native)

微信好友

用微信扫描二维码,
加我好友。

微信公众号

用微信扫描二维码,
订阅宁皓网公众号。

240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点