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. Ajax跨域访问问题-方法大全

    Case I. Web代理的方式 (on Server A) 即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面,由该页面代替用户页面完成交互,从而返回合适的结果.此方案可以解决 ...

  2. The Greate Wall 相关网络知识（一）域名劫持

    什么叫做DNS? DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串 ...

  3. Junit4 架构设计系列(1)： Request，ClassRequest 和 RunnerBuilder

    Overall Junit的成功已不言而喻,其广泛应用于单元测试,测试驱动开发领域.大量的工具,IDE都集成了JUnit,著名的有Maven,Ant,Eclipse,甚至像Google SDK提供的A ...

  4. 什么是image crop？

    一直对image crop很困惑,总算是看到了一篇描述较为简洁的说明:图像crop就是指从图像中移除不需要的信息,只保留需要的部分

  5. bzoj 1414: [ZJOI2009]对称的正方形 manacher算法+單調隊列

    1414: [ZJOI2009]对称的正方形 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 331  Solved: 149[Submit][Stat ...

  6. Mongo的导出工具mongoexport介绍

    需求介绍:将mongodb中的数据以文件的方式导出:json或cvs格式 mongo 提供了mongoexport的工具,可以实现将库中的数据以json或cvs的格式输出到文件中.mongoexpor ...

  7. VS2013中直接浏览网页显示“无法显示此页”的可能原因

    今天在VS2013里面新建了一个空的web应用程序WebApplication1,然后新建了一个 WebForm1.aspx 直接浏览WebForm1.aspx后,网页直接显示: 在网上查询了写资料, ...

  8. poj1935

    给定起点和要经过的点,求最短路径我发现,关于路径的treedp,设计的关键在于每个节点的状态怎么表示对于这道题,有一种常见的方法是令f[i,1]表示经过这个点且还要回来的路径,f[i,0]表示留在以i ...

  9. [Citrix NetScaler] 简述

    额 就这个题目 Citrix NetScaler 是一个VPN,一个代理,一个Gateway的存在,一个Citrix的产品 首先是我们利用Citrix NetScaler的测试环境: 架构上分2种: ...

  10. ANT的下载和安装

    下载 下载页面:http://ant.apache.org/bindownload.cgi 安装 撰写本文的时候,最新的ANT版本是1.9.7,它是绿色软件,解压缩得到apache-ant-1.9.7 ...