index.js 没有做 index.ts 做的事情答案

【问题标题】：index.js not doing what index.ts doesindex.js 没有做 index.ts 做的事情
【发布时间】：2016-07-31 20:58:27
【问题描述】：

我目前正在使用 angular2 和 typescript 构建一个 webapp。我尝试使用index.ts，所以在我的代码中，我可以简单地使用

import {LayoutComponent} from '../layout';

但是当我转译时，javascript 引擎不会寻找index.js，而是寻找./layout，所以它不起作用。

是否有 typescript 转译器的配置，我应该使用 systemjs 配置或使用其他加载器（如 webpack）？

【问题讨论】：

标签： javascript typescript angular systemjs

【解决方案1】：

是的，systemjs需要配置：

您的 index.html 文件中应该有这样的内容：

  System.config({
    packages: {
      src: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
    System.import('src/dist/boot') --- your path to root file
        .then(null, console.error.bind(console));

在 Angular2 文档页面上，您可以找到 five minutes quick start tutorial，按照那个，然后，您可以根据需要自定义您的应用程序：https://angular.io/guide/quickstart

【讨论】：

我已经遵循了快速入门，并且我的 index.html 包含完全相同的代码。如果我使用'../layout/index'，我的应用程序可以找到但我希望能够通过简单地使用'../layout' 来使用index.ts 的全部功能

【解决方案2】：

我找到了原因。 Typescript 正在使用此处解释的 nodejs 模块解析： http://www.typescriptlang.org/docs/handbook/module-resolution.html

但是systemjs不使用nodejs解析。所以我需要使用 ./layout/index 来兼容 systemjs 模块解析或者为每个模块使用一个映射条目。但是 commonjs 确实使用 nodejs 解析，所以我要转译为 commonjs 并使用 webpack。

【讨论】：