[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 ...
随机推荐
- 理解和熟练运用js中的call及apply
call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向. 因为 JavaScript 的函数存在「定义时上下文」和 ...
- Painting The Wall 期望DP Codeforces 398_B
B. Painting The Wall time limit per test 1 second memory limit per test 256 megabytes input standard ...
- Stanford Parser学习入门(3)-标记
以下是Stanford parser中的标记中文释义供参考. probabilistic context-free grammar(PCFG) ROOT:要处理文本的语句 IP:简单从句 NP ...
- 17.1.1 How to Set Up Replication 设置复制:
17.1.1 How to Set Up Replication 设置复制: 17.1.1.1 Setting the Replication Master Configuration 17.1.1. ...
- WCF的配置文件中的要素
Windows Communication Foundation Configuration Schema
- hadoop2.2编程: Interation
继承关系: 1.java.lang.Object |_ org.apache.hadoop.io.BinaryComparable |_ org.apache.hadoop.io.Text //des ...
- [LeetCode#281] Zigzag Iterator
Problem: Given two 1d vectors, implement an iterator to return their elements alternately. For examp ...
- Spark SQL JSON数据处理
背景 这一篇可以说是“Hive JSON数据处理的一点探索”的兄弟篇. 平台为了加速即席查询的分析效率,在我们的Hadoop集群上安装部署了Spark Server,并且与我们的Hive数据仓 ...
- 算法 python实现(一) 基本常识
我算法和数据结构都不好,笨的一比. 现在的目标是熟悉常见和经典算法,看本站两个大牛的博客,在这也推荐一下,特别好,除了算法其他的技术也很不错. Vamei : http://www.cnblogs.c ...
- 论在Repository中使用EF框架
最近在思考框架的事情,从Petshop的传统三层框架过渡到目前的DDD模式. 目前纠结的几个节点是: 1,EF这个ORM框架,有没有必要在 Repository 层封装一下,或者直接在 Service ...