[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 ...
随机推荐
- 网络流系列算法总结(bzoj 3438 1061)
网络流嘛,怎么看都是一堆逗逼题嘛,反正遇到还是都做不起嘛.... 网络流的模板非常简单,难点都在于建图,网络流的建图解决问题范围之广,下至A+B Problem,上至单纯形,线性规划.所以如果对于网络 ...
- bzoj 3065: 带插入区间K小值 替罪羊树 && AC300
3065: 带插入区间K小值 Time Limit: 60 Sec Memory Limit: 512 MBSubmit: 1062 Solved: 253[Submit][Status] Des ...
- Codeforces Round #197 (Div. 2) : D
这题也是一个线段树的水题: 不过开始题目没看明白,害得我敲了一个好复杂的程序.蛋疼啊.... 最后十几分钟的时候突然领悟到了题意,但是还是漏掉一个细节,老是过不去... 以后比赛的时候不喝啤酒了,再也 ...
- 網站SSL加密原理簡介（2张图，握手有9个步骤，解释的很清楚）
Secure Socket Layer說明 SSL是Secure Socket Layer(安全套接層協議)的縮寫,可以在Internet上提供秘密性傳輸.最早是Netscape公司所提出,SSL的目 ...
- InvalidIndexNameException[Invalid index name [2Shard], must be lowercase]
[2016-10-11 14:16:42,191][DEBUG][action.admin.indices.create] [Feron] [2Shard] f ailed to create [2S ...
- Process.RedirectStandardInput
获取或设置一个值,该值指示应用程序的输入是否从 Process.StandardInput 流中读取. 命名空间:System.Diagnostics程序集:System(在 system.dll 中 ...
- Why Creating a Meaningful Morning Routine Will Make You More Successful
https://medium.com/life-learning/how-creating-a-meaningful-morning-routine-will-make-you-more-succes ...
- 【转】Android中自定义控件的步骤
原文网址:http://blog.csdn.net/lianchen/article/details/48038969 Android开发中难免遇到需要自定义控件的需求,有些是产品的要求在Androi ...
- eclipse环境NDK问题汇总
1. 配置NDK路径设置 可以在cygwin中通过vim修改,也可以在windows安装目录中修改 home\<你的用户名>\.bash_profile 文件中最后添加环境变量 NDK=/ ...
- [C#网络编程系列]专题一：网络协议简介
转自:http://www.cnblogs.com/zhili/archive/2012/08/11/NetWorkProgramming.html 因为这段时间都在研究C#网络编程的一些知识, 所以 ...