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. Ubuntu系统、开发环境配置

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

  2. 自定义函数中的参数返回值 “-> (Int -> Int)”的问题

    func makeIncrementer() -> (Int -> Int) { func addOne(number: Int) -> Int { + number } retur ...

  3. DataTable 无法转换的错误

    目前基本上检索都已经离不开Linq了.所以最近在Linq的过程中出现了一些意外情况,特此记录下来. 先描述一下场景: 有一个查询的要求是这样的,检索出Status > 1 的数据.因为要根据其他 ...

  4. MAC 安装Ruby On Rails

    MAC 安装Ruby On Rails 对于新入门的开发者,如何安装 Ruby, Ruby Gems 和 Rails 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发 ...

  5. 练习2 I题 - 水仙花数

      Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u   Description 春天是 ...

  6. Application+Handle+Task

    Application Application和Activity,Service一样,是android框架的一个系统组件,android系统会为每个程序运行时创建一个Application类的对象且仅 ...

  7. [BZOJ 1733] [Usaco2005 feb] Secret Milking Machine 【二分 + 最大流】

    题目链接:BZOJ - 1733 题目分析 直接二分这个最大边的边权,然后用最大流判断是否可以有 T 的流量. 代码 #include <iostream> #include <cs ...

  8. Warm up

    hdu4612:http://acm.hdu.edu.cn/showproblem.php?pid=4612 题意:给你一个无向连通图,问加上一条边后得到的图的最少的割边数; 题解:首先对原图求割边数 ...

  9. Choose the best route

    hdu 2680:http://acm.hdu.edu.cn/showproblem.php?pid=2680 这道题值得一提的两点:在图论中注意重边问题是必须的,有向无向也是同等重要的,如这道题 f ...

  10. 在linux下的apache配置https协议，开启ssl连接

    环境:linux 配置https协议,需要2大步骤: 一.生成服务器证书 1.安装openssl软件 yum install -y openssl mod_ssl 2.生成服务器私匙,生成server ...