如何使TypeScript与SystemJS一起使用？ （问题扩展名为.js）

Question

我从TypeScript文件中的以下导入开始。注意没有.ts扩展名意味着我正在导入一个TypeScript模块：

import githubService from './github.service';

这可以转化为：

var github_service_1 = require('./github.service');

当SystemJS尝试加载此模块时，它会发出以下HTTP命令：

GET /github.service

而不是GET /github.service.js。这显然不起作用。

如何使TypeScript与SystemJS一起使用？

这是我的tsconfig.json文件：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outDir": "./dist",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true
    },
    "exclude": [
        "node_modules"
    ],
    "compileOnSave": false
}

我还尝试将上面的module选项更改为system（将生成的模块格式从CommonJS更改为SystemJS），我仍然遇到同样的问题。

Answer 1

我认为您的问题是缺少模块名称中的js扩展名。不久前System.js改变了这一点，现在能够解决它们而不明确指定＆＃39; .js＆＃39;你必须在index.html中设置System.js选项，如下所示：

System.defaultJSExtensions = true;

了解更多信息：defaultJSExtensions

修改

正如@Naresh指出的那样，defaultJSExtensions现在已经过时了。现在看来，最好的方法是在config中使用packages选项。

希望这有帮助。

Answer 2

在System 2.0+中，您可以使用Loader Hooks自定义内容

https://github.com/systemjs/systemjs/blob/2.0.0/docs/hooks.md#loader-hooks

例如，要将.js文件扩展名添加到已解析的模块中，可以覆盖System.prototype.resolve函数：

const origResolve = System.constructor.prototype.resolve

System.constructor.prototype.resolve = function(moduleId, ...args) {
  return origResolve.call(
    this, 
    moduleId + '.js', // add .js extension to original module id
    ...args
  )
}

请注意，这是一个非常幼稚的示例，因为您可能不想在每个模块ID中添加.js，但它显示了如何控制配置。

Answer 3

在你的tsconfig中：

  

“module”：“commonjs”，

由于您使用的是systemjs，因此将模块格式更改为system。