JSPM can handle installed packages, transpiling ES6, and bundling all from the command-line. This video gives a quick overview of install JSPM, installing packages with JSPM, writing a very simple app in ES6 that uses those packages, then bundling up for production.

Install:

  1. npm install jspm -g

You can use jspm to install any package:

  1. jspm install --save lodash moment

This will help you to create package.json and you need to select some default options such as transplier: Babel.

We create index.html, to import system.js and config.js files whcih created by jspm. Then use System.js to import the app.js file.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="./jspm_packages/system.js"></script>
  7.     <script src="config.js"></script>
  8.     <script>
  9.         System.import('app');
  10.     </script>
  11. </head>
  12. <body>
  13.  
  14. </body>
  15. </html>

app.js:

  1. import moment from 'moment';
  2. import _ from 'lodash';
  3.  
  4. let date = moment().format();
  5.  
  6. _.forEach(date, char => console.log(char));

In the file we can use ES6 already.

Then when you open the index.html you will see it works.

RUN:

  1. jspm bundle-sfx --minify app

This will create a build.js file,

Replace html with:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script src="build.js"></script>
  7. </head>
  8. <body>
  9.  
  10. </body>
  11. </html>

Only includes new build.js file, u will see everything still works.

[Javascript] An Introduction to JSPM (JavaScript Package Manager)的更多相关文章

  1. [Yarn] A JavaScript Package Manager

    Yarn is a new JavaScript package manager that aims to be speedy, deterministic, and secure. See how ...

  2. Introduction to Object-Oriented JavaScript 转载自：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

    Introduction to Object-Oriented JavaScript IN THIS ARTICLE JavaScript review Object-oriented program ...

  3. 你需要知道的包管理器（Package Manager）

    最近我花了一点时间关注了在不同系统之中所用到的包管理器(Package Manager) .最开始的时候,我是在使用Linux操作系统时,对这种工具以及它背后的想法深深迷恋住了:这真是自由的软件世界. ...

  4. A package manager for Qt

    官网 http://www.qpm.io/ A package manager for Qt 注释:这个网站类似JavaScript的包管理器的网站https://www.npmjs.com/ 都是给 ...

  5. 前端笔记知识点整合之JavaScript（一）初识JavaScript

    一.JavaScript简介 1.1网页分层 web前端一共分三层: 结构层 HTML         : 负责搭建页面结构 样式层 CSS          : 负责页面的美观 行为层 JavaSc ...

  6. 前端笔记之JavaScript（一）初识JavaScript

    一.JavaScript简介 1.1网页分层 web前端一共分三层: 结构层 HTML         : 负责搭建页面结构 样式层 CSS          : 负责页面的美观 行为层 JavaSc ...

  7. href="javascript:xxx(this);"和onclick="javascript:xxx(this);"的区别

    href="javascript:xxx(this);"和onclick="javascript:xxx(this);" 一直以为这两种写法是等同的,今天在项目 ...

  8. 解决VS2015启动时Package manager console崩溃的问题 - Windows PowerShell updated your execution policy successfully, but the setting is overridden by a policy defined at a more specific scope

    安装VS2015,启动以后,Package manager console崩溃,错误信息如下: Windows PowerShell updated your execution policy suc ...

  9. Visual Studio 2015 新建MVC项目 Package Manager Console不能使用 (HRESULT: 0x80131500)

    Visual studio 2015 突然新建不了MVC项目,报出错误: HRESULT: 0x80131500 在折腾了很长时间,最后在Github上看到这样一个贴 地址:https://githu ...

随机推荐

  1. PHP使用DES进行加密解密

    DES是一种对称加密算法,也就是通过密文和合法的密钥能够将明文还原出来,在程序开发过程中有些 接口可能需要获取原始数据,而发送的数据又比较敏感(比如用户的密码等信息),这时可以选择DES加密算法,DE ...

  2. Ubuntu系统、开发环境配置

    在VMware10下安装成功了Ubuntu 13.10桌面版,刚安装完需要配置很多内容,下面为记录: 1. 更新源: 想了解更新地址的可以查看apt-get的源列表文件 $ sudo gedit /e ...

  3. Android Linux自带iptables配置IP访问规则

    利用Linux自带iptables配置IP访问规则,即可做到防火墙效果

  4. Laravel框架——分页

    第一种:查询时实现分页(不能使用groupBy) $users = App\User::paginate(15); or $users = User::where('votes', '>', 1 ...

  5. JDK源码阅读(一) ArrayList

    基于JDK7.0 ArrayList<E>类继承了抽象类AbstractList<E> 实现了List<E> 接口,RandomAccess接口,Cloneable ...

  6. iOS: 填充数据表格

    功能:创建一个列表并填充 // // main.m // Hello // // Created by lishujun on 14-8-28. // Copyright (c) 2014年 lish ...

  7. LightOJ_1038 Race to 1 Again

    题目链接 题意: 给一个数n, 每次操作是随机的选择一个[1,N]区间内能够被n整除的数进行除法, 然后得到一个新的n. 问n变成1时的期望操作次数. 思路: 设E[n] 为 当数为x时, 变成 1 ...

  8. PC硬件之我见——CPU篇

    写在最前面:     最近身边很多朋友都购置电脑的想法,往往也会选择性价比较高的DIY攒机方式.不幸的是,并不是所有人都对电脑硬件有一定的了解的,何况在现在这种社会风气下,盲目的相信商家是不明智的.所 ...

  9. c# 测试

    string input = "//a/@href "; int index = input.IndexOf("/@"); String attr = inpu ...

  10. Warm up 2

    hdu4619:http://acm.hdu.edu.cn/showproblem.php?pid=4619 题意:题目大意:给你两种纸牌 ,一种水平放置共有n张 ,一种竖直放置共有m张.水平放置的纸 ...