[TypeScript] Loading Compiled TypeScript Files in Browser with SystemJS

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

weixin_30569033

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

阅读量89

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

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

本文介绍如何将TypeScript编译后的JavaScript文件通过SystemJS加载到浏览器中运行。具体步骤包括使用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.

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