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

【问题标题】：Relative Paths for SystemJS & ES module importsSystemJS 和 ES 模块导入的相对路径
【发布时间】：2016-12-01 18:38:39
【问题描述】：

我在使用 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';

frameworks/index.ts 正在做什么export * from './il8n/language-service';

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

就好了

到目前为止，我已经能够使用 SystemJS 的 "map" option 让我的构建过程正常工作，如下所示：

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 构建配置，以便我可以进行“简单”导入？

【问题讨论】：

您使用哪个 IDE 版本？
我使用 WebStorm 2016.2
你能分享你的项目吗？该功能必须适用于 WS2016.2
我实际上已经完成了半工作，我将很快发布答案。

标签： typescript angular webstorm systemjs node-modules

【解决方案1】：

所以，这个问题是基于发现 here 的 Angular2 Seed (Advanced) repo。我也在那里发布了issue（您可以在其中看到确切的修复）。长话短说：

您需要 TypeScript 2.0 才能在 tsconfig 文件中使用 paths 和 baseUrl 选项。然后在您的 SystemJS 配置文件中，您需要为 paths 和 packages 选项添加一些配置，如下所示：

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

index.ts 是您的frameworks 文件夹内的一个文件，用于导出该目录中的模块。例如，如果您在 frameworks 目录中的某处有一个 language.component.ts 文件，那么您可以在 frameworks/index.ts 文件中执行以下操作：

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

这允许你在你的项目中做import {LanguageComponent} from 'frameworks';（只要你在frameworks目录之外）。

希望这会有所帮助！

【讨论】：