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

问题描述：

在使用 SystemJS 和 ES 导入语法时，我在导入 Angular2 组件时遇到问题.

I'm having an issue with importing Angular2 components when using SystemJS and ES import syntax.

项目结构:

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，所以一种方法是这样的:

Let's say I have a file: ROOT/src/client/app/frameworks/il8n/language-service.ts and another file: ROOT/src/client/app/main/pages/login/login.ts. In login.ts I want to import language.ts, so one way to do that is like so:

//登录.tsimport { LanguageService } from '../../../../frameworks/il8n/language-service';

另一种使用桶的方法是这样的:

Another way to do that, using barrels, is like so:

//登录.tsimport { LanguageService } from '../../../../frameworks/index';

其中 frameworks/index.ts 正在执行 export * from './il8n/language-service';

我不想每次需要导入东西时都做 ../../../ 等；如果我可以从 'frameworks' 中执行 import { LanguageService };

I don't want to do ../../../ etc every time I need to import something; it would be nice if I could just do import { LanguageService } from 'frameworks';

到目前为止，我已经能够使用 SystemJS 的 "map" 选项像这样:

So far, I've been able to get my build process working using SystemJS's "map" option like so:

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

但是，我的 IDE 总是在抱怨(所有 IntelliSense 功能都已完全损坏)，无论何时我执行以下操作:

However, my IDE is complaining (all IntelliSense functionality is completely broken) anytime I do something like:

`import { LanguageService } from 'frameworks';`

这是我的 tsconfig.json 文件:

Here is my tsconfig.json file:

{
    "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 构建配置，以便我可以进行简单"导入?

Is there a way to satisfy both my IDE and the SystemJS build configuration so that I can do "simple" imports?

答

所以，这个问题是基于 Angular2 Seed (Advanced) repo found 此处.我也在那里发布了一个问题(在那里你可以看到确切的修复).长话短说:

So, this question was based around the Angular2 Seed (Advanced) repo found here. I posted an issue there as well (where you can see the exact fix). Long story short:

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

You need TypeScript 2.0 to use the paths and baseUrl options in your tsconfig file. Then in your SystemJS config file, you need to add some configuration to the paths and packages options as follows:

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

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

index.ts is a file INSIDE your frameworks folder which exports the modules in that directory. For example, if you had a language.component.ts file somewhere inside your frameworks directory, in the frameworks/index.ts file you would do:

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

这允许您在您的项目中执行 import {LanguageComponent} from 'frameworks';(只要您在 frameworks 目录之外).

This allows you to do import {LanguageComponent} from 'frameworks'; in your project (as long as you are outside the frameworks directory).

希望这会有所帮助！

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

相关推荐