jspm 简介

Posted 2020-09-29 ESnail

　　借鉴：http://www.jianshu.com/p/4aba847b3e8c

　　功能

　　1. 支持加载javascript各种模块化的写法：AMD、CommonJS、标准化的ES6模块...

        2. 包管理器：能从不同的源安装不同的包，默认的源有npm、github...，安装好包后，在代码中只需要一行代码，就可以使用这些包提供的功能

　　3. 开发时，可以使用Traceur或Babel，实时的在浏览器上编译JavaScript，把ES6代码编译成ES5代码

　　4.在正式发布应用时，可以优化创建的包，把模块依赖的东西打成一个包

　　安装jspm

　　npm install jspm -g 在全局范围安装jspm，就可以在任何地方使用jspm命令了
    jspm // 完成后输入jspm，会返回一些帮组信息
    cd ~/desktop
    mkdir reactProject // 创建项目文件夹
    cd  reactProject
    npm init // 创建package.json，一路回车即可
    ls // 查看文件夹，就会一个package.json文件
    npm install jspm --save-dev // 把 jspm添加到项目开发依赖
    ls // node_modules package.json两个文件
    jspm init // 为jspm创建配置文件config.js， 一系列问题，可一路回车
    ls // 会发现有config.js , jspm_packages（jspm安装的一些包） node_modules package.json

　　安装、卸载包

jspm install jquery=github:components/jquery
jspm uninstall  jquery

　　ES6模块, BrowserSync 使用

 1. npm install -g browser-sync // 安装Node后，通过npm安装BrowserSync(自动刷新)
 2. 使用BrowserSync： browser-sync start --server 开启服务

　　打包bundle 功能

进入项目目录
jspm bundle app/main app/build.js  // 将app文件夹下的main.js里面的js都打包到build.js中
完成以后，会在 app 目录下面创建一个叫 build.js 的文件
在html中用一个 script 标签把 app 下的 build.js 嵌入进来并保存
浏览器在 network 这个选项卡里，少了很多 js 文件，因为已经将他们打包了