带有 TypeScript 简单示例的 SystemJs 失败

Question

我正在尝试将 SystemJs 与 TypeScript 结合使用，基于这篇文章：http://david-barreto.com/how-to-use-typescript-with-systemjs/

index.html

<!DOCTYPE html>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/typescript/lib/typescript.js"></script>
<script>
  System.config({
    transpiler: 'typescript'
  });
  System.import('src/main.ts');
</script>

main.ts

function plusOne(num: number) {
  return num+1;
}

alert(plusOne(1))

然而，当在 Chrome 中打开 index.html 时，我看到以下错误，表明没有发生转换：

common.js:85 Uncaught (in promise) Error: Unexpected token :
  Evaluating http://localhost:8080/src/main.ts
  Loading src/main.ts
    ...

有什么问题？

Answer 1

错误发生是因为 SystemJS 没有使用 typescript 转译 main.ts 中的源代码，因为它没有检测到代码需要转译 - 它不包含像 [=12= 这样的 es6 功能] 或 SystemJS 检查的 import。

这就是 transpiler 选项的工作方式。您想设置 transpiler: 'typescript' 以将其用于 typescript 代码，但 SystemJS 设置为将其用于将 es6 转换为 javascript，没有对 typescript 的明确支持，并且如果代码看起来不像 es6不会使用转译器。

所以你需要明确地告诉SystemJS你的代码是es6。这是适用于您的示例和 SystemJS 0.19 的 SystemJS 配置。请注意，它不适用于 0.20 版本的 SystemJS，它看起来像 you have no other option than to use plugin-typescript.

<!DOCTYPE html>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
  System.config({
    map: {typescript: 'node_modules/typescript'},
    packages: {
      typescript: {main: 'lib/typescript.js', format: 'global'},
      src: {defaultExtension: 'ts', format: 'esm'}
    },
    transpiler: 'typescript',
  });
  System.import('src/main.ts');
</script>

带有 TypeScript 简单示例的 SystemJs 失败

SystemJs with TypeScript simple example fails

javascript

typescript

systemjs

jspm