使用 grunt-ts 编译打字稿时 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 回答解决了加载问题。使用 sourceRoot 或

解决了 sourcemap 问题

inlineSourceMap: true,
inlineSources: true

到ts选项

Answer 1

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

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

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

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

使用 grunt-ts 编译打字稿时 require.js 和 sourcemaps 的问题

Issues with require.js and sourcemaps when compiling typescript with grunt-ts

javascript

typescript

gruntjs

requirejs

grunt-ts