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. mysql申请账户

    INSERT INTO mysql.user set Host='%',user='alipay',password=password('alipay'),Select_priv='Y',Insert ...

  2. iOS 宏定义_16进制色值转化为RGB返回UIColor类型对象

    // 十六进制颜色 #define COLOR_WITH_HEX(hexValue) [UIColor colorWithRed:((float)((hexValue & 0xFF0000) ...

  3. hadoop 2.x 安装包目录结构分析

    bin:Hadoop最基本的管理脚本和使用脚本所在目录,这些脚本是sbin目录下管理脚本的基础实现,用户可以直接使用这些脚本管理和使用hadoop etc:Hadoop配置文件所在目录,包括core- ...

  4. BZOJ 3994 约数个数和

    Description 设\(d(x)\)为\(x\)的约数个数,给定\(N,M\),求\[\sum_{i=1}^{N}\sum_{j=1}^{M}d(ij)\]. Input 输入文件包含多组测试数 ...

  5. March of the Penguins

    poj3498:http://poj.org/problem?id=3498 题意:某个冰块上有a只企鹅,总共可以跳出去b只,问是否可能所有的企鹅都跳到某一块冰块上,输出所有的可能的冰块的编号. 由于 ...

  6. 【POJ3710】Christmas Game （博弈-树上的删边问题）

    [题目] Description Harry and Sally were playing games at Christmas Eve. They drew some Christmas trees ...

  7. 安装drupal练习网站遇到的问题

    1 Skip #conjunction key in __clone() method of core/includes/database/query.inc 解决方案:https://www.dru ...

  8. 想好了，我不学iOS和Android，有4个原因

    1. 2w元的工作,用C++也可达到,不必分散精力学不同的技术,而是应该精益求精练同一门语言,但可以做不同的项目 2. PC更强大,手机只是方便而已,我立志要做真正的IT高手,理所当然应该更喜欢PC. ...

  9. HTTP之Content-Length

    在HTTP协议中,有Content-Length的详细解读.Content-Length用于描述HTTP消息实体的传输长度the transfer-length of the message-body ...

  10. Android MAVEN项目标准目录结构

    1.标准目录结构: src -main      –bin 脚本库      –java java源代码文件      –resources 资源库,会自动复制到classes目录里      –fi ...