Question

嗨，人：D

非常困惑关于如何以优雅的方式 Aurelia 导入我自己的资源

因为我必须做那种事情来导入任何东西：

import { SomeClass } from '../path/to/some/class/';

嗯，路径可以根据目录结构而增长，我真的不想一直写大文本。这有点难看:(

我的问题是Aurelia Framework是否支持轻松导入内容，而无需编写资源的所有路径。

像这样：

import { SomeClass } from 'some-class';

Answer 1

这真的不是Aurelia的问题。这是一个与import语句相关的问题，该语句是ES2015的一部分（因此也是TypeScript的一部分），您选择的模块加载器及其配置方式，以及您自己在构建代码库时的选择。

您在import语句中使用的模块名称（例如'aurelia-framework'或'../resources/custom-elements/date-picker'）由模块加载程序读取。

目前，没有浏览器直接支持这些import语句，因此我们利用各种模块加载器来处理此任务。一些示例是RequireJS，SystemJS或您可以在Webpack世界中使用的各种加载器。这些中的每一个都提供了提供友好模块名称的能力。通常，这些自定义名称仅针对通过依赖关系管理器（例如，NPM或JSPM）安装的应用程序的依赖项进行配置。这些友好名称以某种方式配置。

在SystemJS中，config.js测试版中有jspm.configjs个文件（或0.17）。可以修改此文件以提供您自己的友好模块名称。这可能有风险，因为JSPM的构建假设它拥有此文件，因此它可能会覆盖您放在那里的任何更改。

在使用RequireJS的Aurelia CLI中，可以在aurelia.json文件中进行设置。 CLI覆盖此文件的可能性低于JSPM，但可能发生。

所有这一切，我都不会在这个答案中提供这些例子，因为这个问题的更好答案是相当自省的：如果你不想长时间输入导入模块时的路径，然后您需要重新考虑深层嵌套的项目组织。通过展平项目的源代码，您可以实现更多相同的目标，而无需冒险为此创建自定义配置。

Answer 2

有一些方法可以避免这种情况。例如，假设您有一个名为＆＃34; models＆＃34;的文件夹。在此文件夹中，您有几个类，例如customer.ts，product.ts等。知道了吗？没错！

在src文件夹中创建文件名models.ts，在此文件中，您应导出所有模型。例如：

<强> models.ts

export * from './models/product';
export * from './models/customer';

在 tsconfig.json 中，在compilerOptions内，将paths对象更改为：

"paths": {
  "*": [
    "./src/*"
  ]
}

现在，在应用程序的其余部分中，您可以使用以下命令导入模型：

import { Product } from 'models';
import { Product, Customer } from 'models';

希望这有帮助！

参考Aurelia bundling fails when using relative import path

使用TypeScript在Aurelia中导入资源的更好方法

2 个答案: