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. LPC1114

    时钟配置: 3个时钟源:系统振荡源(system),IRC振荡源,(IRC,内部RC振荡器)看门狗振荡源(WatchDog) MAINCLKSEL:主时钟源选择寄存器(复位值:0) 只用了前两位: 0 ...

  2. MFC笔记

    一.Win32基本程序概念 所有的windows程序都必须载入windows.h MFC程序都有一个Stdafx.h文件,它载入了MFC框架必须的文件. Windows程序以消息为基础,以事件驱动之. ...

  3. phpcms v9栏目列表调用每一篇文章内容方法1

    我们先来看下默认栏目调用的代码: 复制代码代码如下:{pc:content action="lists" catid="$catid" num="25 ...

  4. oracle 自动增长

    在SQLSERVER和MYSQL里面自动增长字段直接设置就可以.在ORACLE里面就复杂多了.特别是我这样的初学者,不过网络是最好的老师,看了很多相关介绍,本人使用的是使用触发器.具体如下: 首先要创 ...

  5. BootStrap Progressbar 实现大文件上传的进度条

    1.首先实现大文件上传,如果是几兆或者几十兆的文件就用基本的上传方式就可以了,但是如果是大文件上传的话最好是用分片上传的方式.我这里主要是使用在客户端进行分片读取到服务器段,然后保存,到了服务器段读取 ...

  6. bzoj 1040: [ZJOI2008]骑士 環套樹DP

    1040: [ZJOI2008]骑士 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1755  Solved: 690[Submit][Status] ...

  7. In machine learning, is more data always better than better algorithms?

    In machine learning, is more data always better than better algorithms? No. There are times when mor ...

  8. Debug和Release之本质区别

    转自Debug和Release之本质区别 Debug 和 Release 编译方式的本质区别 Debug 通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试程序.Release 称为发 ...

  9. Mysql 8个小时连接断开问题解析

    wait_timeout — 指的是mysql在关闭一个非交互的连接之前所要等待的秒数,其取值范围为1-2147483(Windows),1-31536000(linux),默认值28800. int ...

  10. Linux os

    进程就是处于执行期的程序(目标代码存放在某种存储介质上,如内存).进程不只局限于可执行代码,还包括其他资源:打开的文件,挂起的信号,内核数据结构,内存地址空间以及至少一个执行线程. 进程是出于执行期的 ...