带有systemjs配置错误的打字稿答案

【问题标题】：typescript with systemjs configuration error带有systemjs配置错误的打字稿
【发布时间】：2017-05-19 03:25:40
【问题描述】：

我一步一步地按照这个简单的教程，但我得到了这个 404 错误 enter link description here

我确定我已经在本地安装了 typescript

npm install typescript --save

（存在 node_modules 文件夹中的打字稿）

这是 lite-server 的输出

17.05.18 09:14:25 200 GET /index.html
17.05.18 09:14:25 200 GET /node_modules/systemjs/dist/system.js
17.05.18 09:14:25 200 GET /node_modules/systemjs/dist/system.js.map
17.05.18 09:14:25 200 GET /node_modules/typescript/lib/typescript.js
17.05.18 09:14:25 200 GET /src/main.ts
17.05.18 09:14:25 404 GET /typescript

在浏览器控制台中

[object Error]{description: "Fetch error...", message: "Fetch error...", name: "Error", originalErr: Error {...}, stack: "Error: Fetc..."}
Instantiating http://localhost:3000/typescript
Loading typescript
Unable to load transpiler to transpile http://localhost:3000/src/main.ts 
Instantiating http://localhost:3000/src/main.ts

我该如何进一步调查？

项目结构：

.
├── index.html
├── package.json
└── src
    ├── main.ts
    └── person.ts

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SystemJS</title>
  <script src="node_modules/systemjs/dist/system.js"></script>
  <script src="node_modules/typescript/lib/typescript.js"></script>
  <script>
    System.config({
      transpiler: 'typescript',
        packages : {
            src: {
                defaultExtension: 'ts'
            }
        }
    });
    System
      .import('src/main')
      .then(null, console.error.bind(console));
  </script>
</head>
<body>
</body>
</html>

main.ts

import { Person } from './person';

let person = new Person();
console.log(person.name);

person.ts

export class Person {
    public name: string = 'xxxxxx';
}

【问题讨论】：

您能否在控制台收到的错误中发布完整消息？
请提供源代码，不看代码很难说。
提供源代码

标签： typescript systemjs

【解决方案1】：

我按照您提供的链接为您创建了一个有效的 plunkr 演示。

Plunker Demo

这就是我在 index.html 中的脚本的外观。希望这会有所帮助。

<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script>
  System.config({
    transpiler: 'typescript',
    packages: {
      src: {
        defaultExtension: 'ts'
      }
    },
    paths: {
      'npm:': 'https://unpkg.com/'
    },
    map: {
      'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
    }
  });
  System
    .import('src/main')
    .then(null, console.error.bind(console));
</script>

【讨论】：

首先感谢您的支持！将“paths”和“map”属性添加到 SystemJS 配置中，我的代码可以正常工作，而且我注意到 lite 服务器的输出没有在“/typescript”路径上显示 404。这是否意味着它正在从远程加载打字稿？（排序 fo cdn？）或从 node_modules 文件夹加载。如果它是真的“第一个”为什么教程中的代码在没有“路径”和“地图”属性的情况下工作
在教程中打字稿是从 node_module 文件夹中引用的，您可以在最后一个 index.html 代码示例中看到。在我的 plunkr 示例中，它通过 CDN (unpkg.com) 加载，您可以在路径部分看到。