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:

npm install jspm -g

You can use jspm to install any package:

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.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="./jspm_packages/system.js"></script>

    <script src="config.js"></script>

    <script>

        System.import('app');

    </script>

</head>

<body>

</body>

</html>

app.js:

import moment from 'moment';

import _ from 'lodash';

let date = moment().format();

_.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:

jspm bundle-sfx --minify app

This will create a build.js file,

Replace html with:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="build.js"></script>

</head>

<body>

</body>

</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. SuperSocket与Netty之实现protobuf协议，包括服务端和客户端

    今天准备给大家介绍一个c#服务器框架(SuperSocket)和一个c#客户端框架(SuperSocket.ClientEngine).这两个框架的作者是园区里面的江大渔. 首先感谢他的无私开源贡献. ...

  2. 需求分析Point

    1.码段的查询结果的汇总值计算有问题.被删除的是否还算是被使用范围内呢?现在是即使废弃了也算使用的.这就有范围和重叠的问题,需要识别这种集合关系的数据好概念,并搞清楚他们的关系和概念.

  3. 初识Vim

    在Windows系统安装Vim后桌面上会添加gVim.gVim Easy.gVim Read-only 三个快捷方式. gVim 指向主程序,gVim Easy.gVim Read-only 也是,但 ...

  4. [转]DOS命令

    windows dos命令 - 知识天地 - 博客园http://www.cnblogs.com/mfryf/archive/2012/02/13/2348685.html

  5. wcf安全

    http://www.cnblogs.com/artech/archive/2011/07/07/customauthorization01.html 安全 http://www.cnblogs.co ...

  6. socket、tcp、http

    第一部分.概念的理解 1.什么是Socket? Socket又称之为“套接字”,是系统提供的用于网络通信的方法.它的实质并不是一种协议,没有规定计算机应当怎么样传递消息,只是给程序员提供了一个发送消息 ...

  7. bower的权限问题

    装bootstrap的时候,先用sudo指令装了bower,但是一打 bower isntall bootstrap 就报错: Error: EACCES, permission denied '/U ...

  8. 应用安全技术趋势之 Top 5

    而今,大多数应用都依赖于像入侵防护系统(Instrusion Prevention System)和 Web 应用防火墙(Web Application Firewall,以下全文简称 WAF)这样的 ...

  9. java 中的访问修饰符

    一. public:所有类都可以访问 protected:所有子类和同包下的类都可以访问 缺省:同包类都可以访问 private:类本身才可以访问 注意点:protected修饰类属性时,例如 pac ...

  10. luoguP2267 琪琪的项链

    题目:http://www.luogu.org/problem/show?pid=2267 题解:这题略吊. 看了之后发现不能用组合数学直接得出公式,然后如果直接暴力也不知道如何去排除两个颜色序列相同 ...