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

使用SystemJS和ES导入语法时，导入Angular2组件时遇到问题。SystemJS和ES模块导入的相对路径

项目结构：

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抱怨（所有的智能感知功能完全打破），只要我做这样的事情：

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

来源

2016-07-27 exk0730

你使用哪个IDE版本？ – anstarovoyt

我使用WebStorm 2016.2 – exk0730

可以请你分享你的项目吗？该功能必须适用于WS2016。2 – anstarovoyt

所以，这个问题是基于Angular2种子（高级）回购发现here。我在那里也发布了一个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目录之外）。

希望这会有所帮助！

来源

2016-08-02 12:58:00 exk0730

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

回答

相关问题