07、React系列之--使用jspm管理

1、使用JSPM管理JavaScript

1、什么是JSPM

jspm是一个浏览器包管理工具也可以理解成是JavaScript的软件包管理工具，它是工作在SystemJs(模块加载器)通用模块之上，jspm不是一个全新的包管理器，而是基于已存在的包资源进行的，它是与NPM和GitHub协同合作的

2、systemjs简述

systemjs是模块加载器，它可以导入任何流行格式的模块(CommonJs,UMD,AMD,ES6),它是工作在 ES6模块加载polyfill 之上，它能够很好的处理和检测所使用的格式。 systemjs 也能使用插件转换es6（用 Babel 或者 Traceur）或者转换TypeScript 和 CoffeeScript代码。你只需要在导入你的模块之前使用 System.config({ … }) 进行系统配置,jspm使用systemjs管理包及其依赖项，这样我们就不用担心包不按正确的顺序加载。

2、JSPM的使用方法

上面我们大概说了一下什么是jspm现在我们就说说如何使用jspm

1、安装jspm

首先肯定是要安装node,可以使用npm安装

npm install@H_502_27@ -g jspm

2、使用jspm创建一个项目

1、先创建一个文件夹，并使用npm去初始化

mkdir myProjet 
cd@H_502_27@ myProject
npm init

2、使用jspm初始化

jspm init

完成以后可以一路回车

3、使用jspm去安装所需插件，比如

jspm install react
jspm install react-dom
jspm install jquery
jspm install jspm-loader-css
...@H_502_27@等等

* 4、在myProject中创建index.html并输入

<!DOCTYPE html>@H_502_27@
<html@H_502_27@ lang@H_502_27@="en"@H_502_27@>@H_502_27@
<head@H_502_27@>@H_502_27@
    <Meta@H_502_27@ charset@H_502_27@="UTF-8"@H_502_27@>@H_502_27@
    <title@H_502_27@>@H_502_27@Document</title@H_502_27@>@H_502_27@
</head@H_502_27@>@H_502_27@
<body@H_502_27@>@H_502_27@

 <div@H_502_27@ id@H_502_27@="app"@H_502_27@>@H_502_27@</div@H_502_27@>@H_502_27@

</body@H_502_27@>@H_502_27@
<!-- 导入system.js-->@H_502_27@
<script@H_502_27@ src@H_502_27@="jspm_packages/system.js"@H_502_27@>@H_502_27@@H_502_27@</script@H_502_27@>@H_502_27@
<!-- 导入config.js-->@H_502_27@
<script@H_502_27@ src@H_502_27@="config.js"@H_502_27@>@H_502_27@@H_502_27@</script@H_502_27@>@H_502_27@
<script@H_502_27@>@H_502_27@ System.import('./app/main'@H_502_27@); @H_502_27@</script@H_502_27@>@H_502_27@
</body@H_502_27@>@H_502_27@
</html@H_502_27@>@H_502_27@

以上可以看做是一个模板页面

5、在myProject中创建app/main.js

import@H_502_27@ React from 'react'@H_502_27@;
import@H_502_27@ ReactDom from 'react-dom'@H_502_27@ ;

ReactDom.render(
  <h1>hello jspm</h1>,document@H_502_27@.getElementById('app'@H_502_27@)
) ;

6、我们这时就可以在本地server中运行index.html了(在这里我使用browser-sync工具)
7、查看结果

3、jspm打包

jspm打包的命令格式：

jspm bundle 源js文件 目标目录下/bundle.js@H_502_27@

如果项目中有很多的js文件那么我们运行的时候就会加载很多js,我们可以将这些js打到一个包中，就要使用jspm的bundle命令,我们先来看看没有打包的情况吧。

1、没有打包：

1、看index.html用法

2、看js的请求，使用网络上一张图片来说明问题

2、打包

1、打包命令

2、在index.html中使用

3、查看请求的js

我们可以看到，打包以后把好几个js都打包到bundle.js中了，这样就完了打包工作，方便调用。

例如上面的例子，我们要把main.js中打包成bundle.js那么执行如下命令

jspm bundle app/main.js@H_502_27@ bundle.js@H_502_27@

那么们就会在项目根目录下看到bundle.js文件，接下来我们使用这个bundle.js文件，打开index.html,引入bundle.js

<!DOCTYPE html>@H_502_27@
<html@H_502_27@ lang@H_502_27@="en"@H_502_27@>@H_502_27@
<head@H_502_27@>@H_502_27@
    <Meta@H_502_27@ charset@H_502_27@="UTF-8"@H_502_27@>@H_502_27@
    <title@H_502_27@>@H_502_27@Document</title@H_502_27@>@H_502_27@
</head@H_502_27@>@H_502_27@
<body@H_502_27@>@H_502_27@

 <div@H_502_27@ id@H_502_27@="app"@H_502_27@>@H_502_27@</div@H_502_27@>@H_502_27@

</body@H_502_27@>@H_502_27@
<!-- 导入system.js-->@H_502_27@
<script@H_502_27@ src@H_502_27@="jspm_packages/system.js"@H_502_27@>@H_502_27@@H_502_27@</script@H_502_27@>@H_502_27@
<!-- 导入config.js-->@H_502_27@
<script@H_502_27@ src@H_502_27@="config.js"@H_502_27@>@H_502_27@@H_502_27@</script@H_502_27@>@H_502_27@
<!-- 添加打包好的bundle.js-->@H_502_27@
<script@H_502_27@ src@H_502_27@="bundle.js"@H_502_27@>@H_502_27@@H_502_27@</script@H_502_27@>@H_502_27@
<script@H_502_27@>@H_502_27@ System.import('./app/main'@H_502_27@); @H_502_27@</script@H_502_27@>@H_502_27@
</body@H_502_27@>@H_502_27@
</html@H_502_27@>@H_502_27@

到此为止，我们就介绍完了使用jspm来管理js.

07、React系列之--使用jspm管理

1、使用JSPM管理JavaScript

2、JSPM的使用方法

3、jspm打包

猜你在找的React相关文章