jspm入门

支持所有方法写的js的模块，用于加载模块

• 可以为浏览器进行包管理，可以使在不同的源上面安装不同的包（eg.npm、github）

  • eg. jspm install jquery=github:components/jquery

    注：

    也可以使用jspm install jquery下载，因为jspm会用到registry仓库，其中registry.json列出常用的东西及对应名字，jspm会自动搜索进行下载

    也可以使用jspm install [email protected]^2.0.0指定版本号，不指定版本号会安装最新版本

    jquery:设置安装之后的包名

    github:安装源

    components:仓库的拥有者

    jquery:仓库的名字
    

  • 安装成功后会在config.js中的map中多一个jquery包的数据
    

  • 安装成功后会在package.json中多一个jspm的dependencies的信息
    

  • 安装成功后会在jspm_packages中的github文件夹下多一个components文件夹及对应内容
    

  • 删除对应包：eg.jspm uninstall jquery

    • 删除后 map中无jquery、package.json无jquery、jspm_packages下的github包中也无对应包

• 在开发的时候，jspm 可以使用 Traceur 或者 Babel ，实时的在浏览器上编译 JavaScript ，把 es6 的代码编译成 es5 的代码

• 全局安装jspm:npm install jspm -g

• 安装jspm配置文件:jspm init

  • 安装后的config.js文件是jspm的配置文件，里面有jspm的配置信息
  • 安装后的jspm_packages文件夹是用jspm安装的一些包

• jspm支持bundle，即打包资源（将多个资源打包成一个资源）

  • 打包命令：jspm bundle main bundle.js

    

    • main为源文件
    • bundle.js为目标文件

  • 将打包后的bundle.js嵌入到对应的index.html中

    

  • 可以在network选项卡中看到没有了main、fruit和jquery等js文件，而只有bundle文件

  • 自动载入打的包（即bundle.js），打包时加–inject选项，config.js中会在bundles中记录依赖的信息，则可以去掉<script src="bundle.js"></script>，自动打包加载，页面正常显示，请求的是bundle.js文件