使用 grunt-ts 编译 typescript 时出现 require.js 和 sourcemaps 的问题

Question

当使用grunt-ts 并指定和输出文件时，我的应用程序按预期运行，但由于该选项不支持快速编译，我尝试使用常规编译，其中我的所有.ts 文件都位于dist 文件夹中

有两个问题，首先，它将无法加载任何导入的文件，因为它会尝试在没有扩展名的情况下查找它。作为快速修复，我在 require.js 文件上编辑了load fn，并且我的所有依赖项都正确加载，但随后源映射停止工作，我得到的只是 chrome 检查器上的一个空白文件（当然我没有想依赖一个肮脏的黑客）。

请注意，我对 requirejs 不是很熟悉，所以我不太确定这是我这边的错误配置、错误还是缺少的东西。

我的 grunt 配置，与 ts 相关

ts: {
      options: {
        module: 'amd',
        target: 'es5',
        experimentalDecorators: true
      },
      dev: {
        src: ['client-app/**/*.ts'],
        outDir: "dist",
        watch: '.'
      }
    },

我的 bootstrap.js 只是入口点和 require.js 配置文件

requirejs.config({
  baseUrl: '.',
  waitSeconds: 20
});

requirejs(['/init'], function(module) {
  module.main()
});

编译后的init文件的简化版

define(["require", "exports", './section-manager.view'], function (require, exports, section_manager_view_1,) {
    "use strict";
    function main() {
        ///
    }
    exports.main = main;
});
//# sourceMappingURL=init.js.map

还有html

<script src="/js/lib/require.js" data-main="/bootstrap"></script>

感谢任何帮助，谢谢

编辑：

使用 System.js 或 @Luis 回答可以解决加载问题。 sourcemap 问题通过使用sourceRoot 或

解决

inlineSourceMap: true,
inlineSources: true

到 ts 选项

Answer 1

不要使用绝对的模块名称。如果您确实使用了绝对名称，RequireJS 假定您在从模块名称生成路径时不希望进行任何更改，并且将不添加 .js 扩展名。您应该使用相对路径，或者您可以这样做：

requirejs.config({
    baseUrl: '/'
});

requirejs(['init'], function(module) {
  module.main()
});

通过这样做，RequireJS 会自动添加.js 扩展。