设置

在TypeScript 1.8中，当使用AMD时，它将possible到tsc整个由外部模块组成的项目合并为一个输出文件。

出于这个原因，我最终决定抛弃内部模块并将所有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运行（以便将＆＃34; MainModule定义＆＃34; 记录到控制台中）？我加载了RequireJS来处理AMD语法，以及为立即加载指定的main.js文件：

的index.html

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

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

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

的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

Answer 2

TypeScript编译器仅生成define个调用。要触发模块加载，您至少需要进行一次顶级require调用。

使用RequireJS的r.js进行捆绑时，由于这个原因，option很好。

不确定如何使用--outFile来实现此目的。我相信您需要在.ts或.js中直接使用RequireJS API，就像在 index.html 中一样。仅调用require(["Project/MainModule"]);就足够了。

您是否有理由不希望或不能使用r.js，browserify或webpack的解决方案？

Answer 3

对于高级RequireJS用户来说，这确实是一个微不足道的错误。

使用AMD语法和--outFile进行编译时创建的模块定义被命名为模块according to RequireJS。

要使用命名模块，必须通过将模块名称映射到模块路径来在RequireJS配置中定义它。在这种情况下，我们需要定义命名模块Project/MainModule在模块（文件）main中：

<强>的index.html

<script>
    require.config({
        paths: {
            "Project/MainModule": "main"
        }
    });
</script>

然后按名称要求模块，现在可以从分配给它的文件中查找：

<强>的index.html

<script>
    require(["Project/MainModule"], function () {
        console.log("app loaded");
    });
</script>

注意：包含Require.js时必须省略data-main属性，否则模块将被加载两次（或者，至少上面的示例是两次登录）。

注意2 ：这只是完整解决方案的一部分。必须为TypeScript编译器发出的所有模块指定module -> file映射，这根本不可行。但是，此相关问题适用answer。

Answer 4

我已经为这个确切的用例写了SAMD：https://github.com/morris/samd

它提供了最小的AMD实现，足以满足TypeScript AMD捆绑包和通过常规脚本标签包括的依赖项。

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

设置

输出

用法（？）

4 个答案: