SystemJS 和 ES 模块导入的相对路径

我在使用 SystemJS 和 ES 导入语法时导入 Angular2 组件时遇到问题。

项目结构：

ROOT
|_src
  |_client
    |_app
      |_frameworks
        |_il8n
        |_analytics
      |_main
        |_components
        |_pages
        |_utility

假设我有一个文件：ROOT/src/client/app/frameworks/il8n/language-service.ts和另一个文件：ROOT/src/client/app/main/pages/login/login.ts。在 login.ts 中，我想导入 language.ts，所以一种方法是这样的：

//login.ts import { LanguageService } from '../../../../frameworks/il8n/language-service';

另一种方法是使用桶，如下所示：

//login.ts import { LanguageService } from '../../../../frameworks/index';

where frameworks/index.ts是在做export * from './il8n/language-service';

我不想做../../../每次我需要导入东西时等等；如果我能做就好了import { LanguageService } from 'frameworks';

到目前为止，我已经能够使用 SystemJS 来让我的构建过程正常工作“地图”选项 https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#map像这样：

map: {
      frameworks: 'src/client/app/frameworks/index',
      components: 'src/client/app/main/components/index',
      pages: 'src/client/app/main/pages/index'
    }

然而，每当我执行以下操作时，我的 IDE 都会抱怨（所有 IntelliSense 功能都完全损坏）：

`import { LanguageService } from 'frameworks';`

这是我的 tsconfig.json 文件：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "removeComments": true,
        "noLib": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "pretty": true,
        "allowUnreachableCode": false,
        "allowUnusedLabels": false,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitUseStrict": false,
        "noFallthroughCasesInSwitch": true,
        "baseUrl": "./src",
        "paths": {
            "frameworks": ["client/app/frameworks"],
            "components": ["client/app/main/components"],
            "pages": ["client/app/main/pages"],
            "utility": ["client/app/main/utility"]
        }
    },
    "compileOnSave": false
}

有没有办法同时满足我的 IDE 和 SystemJS 构建配置，以便我可以进行“简单”导入？

所以，这个问题是基于 Angular2 Seed (Advanced) repo 发现的here https://github.com/NathanWalker/angular2-seed-advanced。我发布了一个issue https://github.com/NathanWalker/angular2-seed-advanced/issues/180那里也有（在那里你可以看到确切的修复）。长话短说：

您需要 TypeScript 2.0 才能使用paths and baseUrltsconfig 文件中的选项。然后在你的SystemJS配置文件中，你需要添加一些配置paths and packages选项如下：

packages: {
  ...
  frameworks: { defaultExtension: js, main: index.js }
  ...
},
paths: {
  ...
  frameworks: 'relative/path/to/frameworks/folder'
  ...
}

index.ts是你里面的一个文件frameworks导出该目录中模块的文件夹。例如，如果您有一个language.component.ts文件位于框架目录中的某个位置frameworks/index.ts文件你会做：

export * from 'path/to/language.component';.

这可以让你做import {LanguageComponent} from 'frameworks';在你的项目中（只要你在frameworks目录）。

希望这可以帮助！