Question

我有一个简单的TypeScript项目，包含2个类：Main.ts和Ball.ts，首先是导入第二个类。我正在尝试创建一个类似于AS3项目的设置，其中有一个入口点类可以触发所有其他事情发生。我想将所有js编译成单个文件，以便我可以更有效地加载它。我有的文件：

Main.ts

import Ball from "./Ball";

class Main {
    a: number = 10;

    constructor() {
        console.log("Hello from Main!");
        let ball:Ball = new Ball();
    }
}

let main = new Main();

Ball.ts

export default class Ball{
    shape:string = "round";
    constructor(){
        console.log("Ball has been created");
    }
}

我正在使用的TS配置：

{
  "compilerOptions": {
        "target": "es5",
        "module": "amd", 
        "outFile": "./public/js/bundle.js",
        "strict": true
    }
}

要在js中使用amd模块，我使用SystemJS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>Hello</h1>
<script type="text/javascript" src="js/system.js"></script>
<script>
    SystemJS.config({
        baseURL: '/js'
    });
    SystemJS.import('bundle.js');
</script>
</body>
</html>

编译的js文件如下所示：

define("Ball", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Ball = (function () {
        function Ball() {
            this.shape = "round";
            console.log("Ball has been created");
        }
        return Ball;
    }());
    exports.default = Ball;
});
define("Main", ["require", "exports", "Ball"], function (require, exports, Ball_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Main = (function () {
        function Main() {
            this.a = 10;
            console.log("Hello from Main!");
            var ball = new Ball_1.default();
        }
        return Main;
    }());
    var main = new Main();
});

正如我所看到的，编译过程没有问题，但是当我在浏览器中查看结果代码时，我看不到任何正在运行的内容，也没有触发console.log语句到控制台。 bundle.js本身是在网络选项卡中加载状态为200所以我假设SystemJS请求它并正确加载内容，但是如何触发主模块？我也尝试使用系统类型模块，但它给出了相同的结果。

Answer 1

问题

执行SystemJS.import('bundle.js');时，SystemJS使用baseURL /js/bundle.js创建模块名称的路径，并发出GET HTTP请求以获取该模块。获取后，它会在包中找到名为bundle.js的模块，但找不到它。您有两个名为Ball和Main的模块。（如果AMD的define调用的第一个参数是一个字符串，那就是模块名称。）所以你必须使用这些模块名称之一。

解决方案

如果您执行Main，SystemJS将搜索模块SystemJS.import("Main")。但是，默认情况下，SystemJS将为Main创建路径，其方式与bundle.js相同。 Main不在/js/Main，而在/js/bundle.js。那么如何告诉SystemJS从正确的位置获取它呢？您必须使用bundles配置选项：

SystemJS.config({
    baseURL: "/js",
    bundles: {
        "bundle.js": ["Main"],
    },
});
SystemJS.import("Main");

上面的配置说“名为bundle.js的包含有模块Main”。（我本可以在数组中列出Ball，但在这种情况下不需要。）所以当你执行SystemJS.import("Main")时，SystemJS从bundle.js获取名为/js/bundle.js的模块，在其中查找名为Main的模块。

使用SystemJS和TypeScript从捆绑文件执行模块

1 个答案:

问题

解决方案