如何使用AMD模块运行编译为单个文件的TypeScript应用程序？

Question

我确信我在这里遗漏了一些完全无足轻重的东西,但是对于它的生命我无法弄明白.直到最近我才开始使用AMD(RequireJS).我的应用程序将(将)在浏览器中运行.

---

建立

在打字稿1.8,这是可能的,以tsc采用AMD当外部模块组成成一个单一的输出文件的整个项目.

出于这个原因,我最终决定抛弃内部模块并将我的所有VS2015项目.ts和.tsx文件外部模块,然后使用以下编译器参数将它们编译为单个文件:

--module AMD --outFile main.js

---

产量

该单如预期的那样创建输出main.js文件,列出了它是这是该项目组成部分的所有模块:

main.js

define("Project/MainModule", ["require", "exports" ...], function (require, exports ...) {
    "use strict";
    console.log("MainModule defined");
    // ...
});

...    

---

用法(？)

现在,我如何Project/MainModule运行 - 例如 - index.html(以便将"MainModule定义"记录到控制台中)？我加载了RequireJS来处理AMD语法,以及为立即加载指定的main.js文件:

的index.html

<script data-main="main" src="Require.js"></script>

这正确加载main.js,我通过console.log在该文件中的大量定义列表(外部模块)之后包含一个调用来确保.请原谅我,如果这是一个微不足道的问题,我找不到任何关于如何使用这种方法的编译应用程序(可能我没有使用正确的关键字？).

---

编辑:我尝试按名称要求模块:

的index.html

<script>
    window.onload = function () {
        require(["Project/MainModule"], function () {
            // this
        });
    }
</script>

......但这并不好,RequireJS无法找到该模块.

Answer 1

您应该通过脚本标记加载构建的文件:

<head>
    <script src="bower_components/dojo/dojo.js"></script>
    <script src="built/run.js"></script>
</head>

然后你可以使用require加载模块:

<body>
    <script>require(["app"], run => run());</script>
</body>

tsconfig.json:

{
    "compilerOptions": {
        "declaration": false,
        "module": "amd",
        "target": "es5",
        "noImplicitAny": true,
        "sourceMap": false,
        "out": "./built/run.js",
        "moduleResolution": "node"
    },
    "exclude": [
        "bower_components"
    ]
}

有关工作示例,请参阅https://github.com/ca0v/ags-lab/blob/master/index.html.

或者,您可以使用data-main加载requirejs配置.该配置可以将构建的脚本指定为依赖项.例如:

requirejs.config({
    paths: {
        "openlayers": "bower_components/ol3/ol",
        "jquery": "bower_components/jquery/dist/jquery.min"
    },
    deps: ["built/run"],
    callback: () => {
        requirejs(["app"], run => run());
    }
});

并使用data-main加载它:

<head>
    <script src="bower_components/requirejs/require.js" data-main="config.js"></script>
</head>

请参阅https://github.com/ca0v/ol3-lab/blob/master/index.html