[TypeScript] Loading Compiled TypeScript Files in Browser with SystemJS

最新推荐文章于 2024-06-02 22:39:24 发布

weixin_30698527

最新推荐文章于 2024-06-02 22:39:24 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/5571892.html

本文详细介绍如何将TypeScript编译后的JavaScript文件通过SystemJS加载到浏览器中运行。包括设置index.html页面引入SystemJS，配置SystemJS加载指定的模块，启动HTTP服务器验证效果等。

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.

To use system.js, first create a index.html, add system.js file from npmcdn:

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-1  // -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");
    }
}