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';
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'
}然而，每当我执行以下操作时，我的集成开发环境就会抱怨(所有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
}有没有一种方法可以同时满足我的集成开发环境和SystemJS构建配置，这样我就可以进行“简单”的导入？
Stack Overflow用户
发布于 2016-08-02 20:58:00
因此，这个问题是基于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目录之外)。
希望这能有所帮助！
https://stackoverflow.com/questions/38618257
复制相似问题
腾讯云开发者
