[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 ...
随机推荐
- App 性能分析
关键因素: ---- Instrument 性能分析神器 1. 启动时间 应用启动时间长短对用户第一次体验至关重要,同时系统对应用的启动.恢复等状态的运行时间也有严格的要求,在应用超时的情况下系统会直 ...
- CSS3 calc() 会计算的属性
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值. ...
- BZOJ 1660: [Usaco2006 Nov]Bad Hair Day 乱发节
Description Input * Line 1: 牛的数量 N. * Lines 2..N+1: 第 i+1 是一个整数,表示第i头牛的高度. Output * Line 1: 一个整数表示c[ ...
- SQL server 开启 cmdshell
GO RECONFIGURE GO GO RECONFIGURE GO EXEC master..xp_cmdshell 'net use Z: \\192.168.11.1\192.168.11.4 ...
- 中断服务程序（Interrupt Service Routines，ISR）注意事项
转自ISR之不能做什么 中断是嵌入式系统中重要组成部分,很多编译器开发商都让标准c支持中断,并引入关键字_interrupt.但是: 1.ISR不能有返回值: 2.ISR不能传递参数: 3.ISR应该 ...
- 编译Firebird的源码
编译步骤:一.下载所需的软件 1.下载FB2.0 RC4 http://optusnet.dl.sourceforge.net/sourceforge/firebird/Firebird ...
- php获取html checkbox的值。
一个小错误,搞了好久: <label><input class="short" type="checkbox" id="is_onl ...
- linux 复制文件时，报cp: omitting directory `XXX'
今天在用linux命令进行文件复制时omitting cp -i BBS /opt/workspace/apache-tomcat-6,参数用的是 -i),所以也不太熟悉,原来,还有子目录文件,而是必 ...
- MongoDB的备份（mongodump）与恢复（mongorestore）
备份: D:\mongodb2.4.3\bin>mongodump -u101.key -p123 -h 127.0.0.1:27017 -d mydb -o d:\backup 恢复: D:\ ...
- [PeterDLax著泛函分析习题参考解答]第5章 赋范线性空间
1. (a) 证明 (6) 定义了范数. (b) 证明它们在 (5) 式意义下是等价的. 证明: $$\bex |(z,u)|'\leq |(z,u)|\leq 2|(z,u)|',\quad |(z ...