[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 ...
随机推荐
- 50个实用的jQuery代码段让你成为更好的Web前端工程师
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...
- [刷机教程] 三星Note8 N5100不卡屏的唯一解决办法--落雨刷机教程
首先我自己写了一个word,在附件里.大概23页,图文并茂.附带三星NOTE8 N5100 MD2下载包 刷机要谨慎啊,小伙伴们. 刷机教程已经上传到我本人的网站:点击进入去看吧.和word一样. h ...
- IAR编译ZStack-CC2530为可下载运行的HEX文件的正确配置
转自IAR编译ZStack-CC2530为可下载运行的HEX文件的正确配置 IAR编译ZStack-CC2530为可下载运行的HEX文件的正确配置: 1.正确配置输出文件格式:菜单选择P ...
- Eclipse+Maven+Spring+CXF 构建webservice 服务
一. 软件准备 Eclipse 4.2.1 Maven 2.2.1 Spring 3.2.6 CXF 3.0.2 二. 步骤 首先,在Eclipse中用maven构建一个quickstart版本的ma ...
- ANDROID_MARS学习笔记_S03_003_LocationManager、LocationListener
一.简介 二.代码1.xml (1)AndroidManifest.xml 增加 <uses-permission android:name="android.permission.A ...
- Android textAppearance的属性设置及TextView属性详解
textAppearance的属性设置 android:textAppearance="?android:attr/textAppearanceSmall" android:tex ...
- 【HDOJ】1175 连连看
BFS.wa了一下午,原来是YES,写成了Yes. #include <iostream> #include <cstdio> #include <cstring> ...
- 集合ArrayList双色球练一练(自己的方法，太麻烦)
namespace 集合__双色球练一练{ class Program { static void Main(string[] args) { / ...
- MOSS母板页制作 学习笔记（一）
转:http://xiachanghao1990.blog.163.com/blog/static/4869602420114235536573/ 母版页制作其实应该算是一个比较基础的工作,但是熟练制 ...
- MVVM模式应用体会
转自:http://www.cnblogs.com/626498301/archive/2011/04/08/2009404.html 进公司实习工作后,本人接触的第一个技术名语就是MVVM模式,从学 ...