Ionic 2在“node_modules”之外的动态导入

Posted 2021-04-21

我在这个页面上读过ModuleResulution for typescript的描述：https://www.typescriptlang.org/docs/handbook/module-resolution.html#node

据我所知，我要导入的所有文件必须在node_modules目录中。有没有办法导入不在此目录中的文件？

假设我有以下目录结构（src/MyApp/）：

├── Console
│   └── Console.ts 
├── Interfaces
│   └── CredentialsInterface.ts 
└── Service
    ├── Authentication.ts
    ├── Router.ts
    └── Connector.ts

然后例如在我的src/pages/login/login.ts中我用它来导入Console.ts：

import { Console } from '../../MyApp/Console/Console'; 

但我希望实现这样的目标：

import { Console } from '@MyApp/Console/Console';

@MyApp是src/MyApp的别名。

由于潜在的文件/文件夹重定位或稍后重构我可能想要替换我的文件的位置，但我不想手动遍历所有文件以更改“硬编码”路径，如果这是有道理的，我知道一个事实上，这对其他工具如Composer是可能的。

这有可能吗？提前致谢！

答案

要做到这一点，你必须更新几个文件，你可以通过更新tsconfig.json并扩展webpack配置文件来完成。

在tsconfig.json你需要添加compilerOptions：

"baseUrl": "./src",
"paths": {
  "app/*": [
    "app/*"
  ],
  "@env": [
    "environments/environment"
  ],
  "interfaces/*": [
    "interfaces/*"
  ],
  "providers/*": [
    "providers/*"
  ],
  "validators/*": [
    "validators/*"
  ]
}

我留下了一个链接到我所做的简要文档，它实现了这个，并使用了angular-cli的环境

Ionic envs and beauty paths