Question

我在使用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＆＃39; "map" option来构建我的构建过程了：

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

然而，无论何时我做以下事情，我的IDE都在抱怨（所有智能感知功能完全被破坏）：

`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构建配置，这样我才能做到＆＃34;简单＆＃34;进口？

Answer 1

所以，这个问题是基于发现here的Angular2种子（高级）回购。我也在那里发布了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文件夹中的文件，用于导出该目录中的模块。例如，如果框架目录中的某个地方有language.component.ts文件，则可以在frameworks/index.ts文件中执行：

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

这允许您在项目中执行import {LanguageComponent} from 'frameworks';（只要您在frameworks目录之外）。

希望这有帮助！

SystemJS的相对路径＆amp; ES模块导入

1 个答案: