SystemJS 和 ES 模块导入的相对路径
Relative Paths for SystemJS & ES module imports
我在使用 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 构建配置,以便我可以进行 "simple" 导入?
所以,这个问题是基于 Angular2 种子(高级)回购协议 here. I posted an 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
目录之外)。
希望对您有所帮助!
我在使用 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 构建配置,以便我可以进行 "simple" 导入?
所以,这个问题是基于 Angular2 种子(高级)回购协议 here. I posted an 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
目录之外)。
希望对您有所帮助!