07、React系列之--使用jspm管理
来源:互联网 发布:易语言网络爬虫 编辑:程序博客网 时间:2024/06/06 05:00
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 -g jspm
2、使用jspm创建一个项目
- 1、先创建一个文件夹,并使用npm去初始化
mkdir myProjet cd myProjectnpm init
- 2、使用jspm初始化
jspm init
完成以后可以一路回车
- 3、使用jspm去安装所需插件,比如
jspm install reactjspm install react-domjspm install jqueryjspm install jspm-loader-css...等等
* 4、在myProject中创建index.html并输入
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"></div></body><!-- 导入system.js--><script src="jspm_packages/system.js"></script><!-- 导入config.js--><script src="config.js"></script><script> System.import('./app/main');</script></body></html>
以上可以看做是一个模板页面
- 5、在myProject中创建app/main.js
import React from 'react';import ReactDom from 'react-dom' ;ReactDom.render( <h1>hello jspm</h1>,document.getElementById('app')) ;
6、我们这时就可以在本地server中运行index.html了(在这里我使用browser-sync工具)
7、查看结果
3、jspm打包
jspm打包的命令格式:
jspm bundle 源js文件 目标目录下/bundle.js
如果项目中有很多的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 bundle.js
那么们就会在项目根目录下看到bundle.js文件,接下来我们使用这个bundle.js文件,打开index.html,引入bundle.js
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"></div></body><!-- 导入system.js--><script src="jspm_packages/system.js"></script><!-- 导入config.js--><script src="config.js"></script><!-- 添加打包好的bundle.js--><script src="bundle.js"></script><script> System.import('./app/main');</script></body></html>
到此为止,我们就介绍完了使用jspm来管理js.
- 07、React系列之--使用jspm管理
- 06、React系列之--使用browserify管理
- 08、React系列之--使用webpack管理
- jspm的基本使用
- 09、React系列之--使用yarn包管理工具
- 深入浅出React之第三章:使用redux管理应用状态
- React Native系列之-React.js介绍
- React Native系列之-React.js入门
- 01、React系列之--React简介
- React ---- 状态管理之React-Redux
- React Native系列之-简介
- 02、React系列之--FlexBox
- react状态管理之flux
- React ---- 状态管理之Redux
- jspm安装
- 【REACT NATIVE 系列教程之十一】插件的安装、使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)
- React动画之react-transition-group使用
- React动画之react-transition-group使用
- Spark2.X 原码分析 ---- Rpc初探
- 软链接/硬链接/fd
- 做产品的思路
- 用bash升级python第三方库
- 线程的互斥与同步通信-笔记整理3
- 07、React系列之--使用jspm管理
- Android开发艺术探索读书(三)-View的事件体系
- leetcode 409. Longest Palindrome
- 【CSS】4.选择器
- mybatis-generator
- 【原创】基于FPGA的数码管按键显示(two_key)
- Centos6.8中kdump的设置问题
- 在O(1)时间复杂度删除链表节点
- RabbitMQ中的Exchange Types