[TypeScript] Loading Compiled TypeScript Files in Browser with SystemJS
TypeScript outputs JavaScript, but what are you supposed to do with it? This lesson shows how to take the output and use SystemJS as the module loader so that you can use the files in your browser.
https://npmcdn.com/systemjs@0.19.29/
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://npmcdn.com/systemjs@0.19.29/dist/system.js"></script>
</head>
<body> <script>
System.config({
packages: {
"dist": {
"defaultExtension": "js",
"main": "main"
}
}
}); System.import("dist")
</script>
</body>
</html>
It tell System to load the packages. Serve "dist" folder, use default extension as js, and the main entry file is main.js. Then import dist folder.
Start a server:
http-server -c- // -c-1 -> no cache
Run:
tsc -w
To prove it do work in broswer, add console log in the code:
//main.ts
import {Two} from './two';
class Person{
constructor(){
console.log("Person!");
}
}
new Two();
new Person();
// tow.ts
export class Two{
constructor(){
console.log("Two");
}
}
[TypeScript] Loading Compiled TypeScript Files in Browser with SystemJS的更多相关文章
- compiled python files
[compiled python files] As an important speed-up of the start-up time for short programs that use a ...
- Couldn't import dot_parser, loading of dot files will not be possible. 解决方法
参考: pydot and graphviz error: Couldn't import dot_parser, loading of dot files will not be possible ...
- 001——Typescript 介绍 、Typescript 安 装、Typescript 开发工具
一. Typescript 介绍 1. TypeScript 是由微软开发的一款开源的编程语言. 4. TypeScript 是 Javascript 的超级,遵循最新的 ES6.Es5 规范.Typ ...
- TypeScript 1.7 & TypeScript 1.8
TypeScript 1.7 & TypeScript 1.8 1 1 https://zh.wikipedia.org/wiki/TypeScript TypeScript是一种由微软开发的 ...
- nodejs + typescript + koa + eslint + typescript eslint + prettier + webstorm
ESLint 安装 yarn add -D eslint 生成配置文件 yarn eslint --init cli 选项 How would you like to use ESLint? To c ...
- [TypeScript] Type check JavaScript files using JSDoc and Typescript 2.5
Typescript 2.5 adds JSDoc type assertion support for javascript file via ts-check service. First of ...
- TypeScript Writing .d.ts files(编写声明文件)
当使用扩展的JavaScript库或者插件API的时候,将需要使用声明文件(.d.ts)来描述库的类型.本文内容将包括如何编写声明文件相关的一些高级概念,然后用一些例子来展示如何将各式各样的概念与声明 ...
- TypeScript tsconfig.json(TypeScript配置)
如果一个目录下存在一个tsconfig.json文件,那么意味着这个目录是TypeScript项目的根目录. tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项. 一个项目可以通 ...
- “Compiled” Python files
To speed up loading modules, Python caches the compiled version of each module in the __pycache__ di ...
随机推荐
- webservice 的权限验证
1. http://blog.csdn.net/jaune161/article/details/25602655 2. http://wcp88888888.iteye.com/blog/13993 ...
- Dynamips/Dynagen模拟CISCO路由环境
今天将<网络互连技术>--路由,交换与远程访问实训教程的实验书拿出来了看了部门. 搭建了一个基于DYNAGEN的虚拟环境. 归纳一下大约步骤: ~~~~~~~~~~~~~~ 一,在WIND ...
- 【BZOJ 1597】 [Usaco2008 Mar]土地购买 （斜率优化）
1597: [Usaco2008 Mar]土地购买 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3601 Solved: 1322 Descrip ...
- 转载：MyEclipse中防止代码格式化时出现换行的情况的设置
转载出处:http://www.cnblogs.com/yjhrem/articles/2310013.html 编辑完成代码,用MyEclipse的代码格式化后,本来不长的代码也被自动转成了多行. ...
- How to hide TabPage from TabControl
No, this doesn't exist. You have to remove the tab and re-add it when you want it. Or use a differen ...
- javascript外部使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- m2e使用问题——发布web项目时lib目录下的jar包未发布
解决过程如下: 在项目上点右键查看properties—>Deployment Assembly,看Deploy Path这项上是否缺少WEB-INF/lib这一项. 相关操作截图如下:
- POJ_3181_Dollar_Dayz_(动态规划,完全部分和,完全背包)
描述 http://poj.org/problem?id=3181 FJ有n元钱,有k种商品,各为1,2,...,k-1,k元,问有多少种花掉这n元钱的方法. Dollar Dayz Time L ...
- java基于xml配置的通用excel单表数据导入组件(三、负责数据转换处理的类)
package xxxxxxx.manage.importexcel; import java.util.Map; import java.util.logging.Logger; import xx ...
- 详解Makefile 函数的语法与使用
使用函数: 在Makefile中可以使用函数来处理变量,从而让我们的命令或是规则更为的灵活和具有智能.make所支持的函数也不算很多,不过已经足够我们的操作了.函数调用后,函数的返回值可以当做变量来使 ...