[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 ...
随机推荐
- Spring之Spring MVC
Spring调配半天没搞定,原来是web.xml应该放在WEB-INF的目录下,而不是webcontent目录下: java.lang.ClassNotFoundException: org.spri ...
- Java按正则提取字符串
在Java开发中,有时会遇到一些比较别扭的规则从字符串中提取子字符串,规则无疑是写正则表达式来表达了,那按照正则来提取子字符串就会用到java.util.regex包. java.util.regex ...
- JS实现精确加减乘除
说明:项目中要使用 JS 实现自动计算的功能,进行一些浮点数运算时,计算结果却是一长串的值,这里提供一个解决方法,问题基本上可以解决. 具体代码如下: //加法函数 function accAdd(a ...
- 关于Java（JDBC介绍）
JDBC API 允许用户访问任何形式的表格数据,尤其是存储在关系数据库中的. JDBC 简单功能 连接数据源,如数据库 传给数据库查询和更新指令 获取并处理数据库返回结果(对查询等的响应) 示例代码 ...
- JVM 学习笔记
1. JAVA类分为三类: 1.1 系统类 (用系统类加载器加载bootstrap ClassLoader) 1.2 扩展类 (用扩展类加载器加载Ext ClassLoader) 1. ...
- Word添加带圈文字
这个在项目有编号李没有,只能一个一个输入 A.开始------------字体里选择带圈的字符号 B.插入,符号里选编号
- The Bellman-Ford algorithm
This algorithm deals with the general case, where G is a directed, weight graph, and it can contains ...
- 在安全层面，企业如何获得更好的投资回报率 ROI？
前言 任何企业对投资都有回报的要求,回报可能是直接的「利润」,达到短期.长期的目标,或者通过投资减少损失.因此每个项目的决策者在每笔投资前都要衡量 ROI,证明该投资能达到的效果和收益,以便在项目结束 ...
- 没做过编译器就是被人欺——从一道变态的i++题猜编译器的行为（表达式从左往右扫描，同一变量相互影响）
首先不要被人蒙了,如果是这样,根本编译不过: int i=1; int b=i+++++i; printf("%d %d\n", b ,i); Mingw报错:error: lva ...
- 【HDOJ】4553 约会安排
线段树.线段树的细节很重要,小数据遍历可以发现问题. /* 4553 */ #include <iostream> #include <string> #include < ...