jspm使用,es6 模块开发

1、简介

  • JavaScript 模块的写法有几种,比如 AMD,CommonJS .. 还有标准化的 ES6 的写法 .. jspm 支持加载所有的用这些方法写的 JavaScript 模块
  • 在你的应用里,现在就可以使用 ES6 提供的标准写法 .. 至于怎么去载入模块可以交给 jspm 去处理 .. 也就是你只需要了解 ES6 的模块写法 ..
  • jspm 还是一个为浏览器上用的东西准备的一个包管理 .. 比如它可以让你去从不同的源去安装不同的包 .. 默认的源有 npm ,还有 github .. 安装好你需要的包以后,在你的代码里,只需要一行代码,就可以使用这些包提供的功能 .. 不用担心其它的事情 . .
  • 在开发的时候,jspm 可以使用 Traceur 或者 Babel ,实时的在浏览器上编译 JavaScript ,把 es6 的代码编译成 es5 的代码 ..
  • 在正式发布应用的时候,可以优化创建的模块,把模块依赖的东西打成一个包

2、安装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

3、安装包 jspm install

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

4、使用ES6模块, BrowserSync 使用

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

5、打包bundle 功能

  • 打开浏览器的开发者工具 .. 再打开 network 这个选项卡 .. 在这里你会看到被下载的一些东西 .. 这里有挺多 js 文件 .. main.js .. fruit.js ,jquery.js 等等 ..
  • jspm 支持 bundle,也就是打包的功能,就是把一些资源打包成一个东西 .. 比如下面我们去把 main.js 这个模块打包成一个东西 ..
  • 打包用的是 jspm bundle 命令
进入项目目录
jspm bundle app/main app/build.js  // 将app文件夹下的main.js里面的js都打包到build.js中
完成以后,会在 app 目录下面创建一个叫 build.js 的文件 .. 回到编辑器 .. 用一个 script 标签 .. 把 app 下的 build.js 嵌入进来 .. 保存 ..
再回到浏览器 .. 在 network 这个选项卡里,会少了很多 js 文件,因为我们把它们打成了一个包 .. 就是这个 build.js ..

  • 没有打包
html_nobundle.png

bundle.png
js_noBundle.png
  • 打包
build.png


作者:iOS_成才录
链接:https://www.jianshu.com/p/4aba847b3e8c
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

猜你喜欢

转载自blog.csdn.net/hahahhahahahha123456/article/details/80220213