Question

更新[09/12/2017 16:58 EST]

添加了为什么我在本问题的底部使用我自己的模块使用本机支持的非相对导入时犹豫不决的原因。

更新[09/12/2017 12:58 EST]：

根据请求，我在下面的文件结构中反映了我的实际用例。这是一个嵌套视图模块，在目录树的某个位置请求实用程序模块。

按要求

在TypeScript和ES6中，可以通过

导入自定义模块

// Relative
import { numberUtil } from './number_util';
// OR
// Non-relative
import { numberUtil } from 'number_util';

根据TypeScript文档（link），应该：

...使用   保证维护的自己模块的相对导入   它们在运行时的相对位置。

...导入任何路径时使用非相对路径   您的外部依赖项。

我的问题是我有一个这样的项目结构：

project/
  |--utils
  |    |--number_util.ts
  |--views
  |    |--article_page
  |         |-- editor_view
  |                |--editor_text_area.ts

当我在utils/number_util模块中包含editor_text_area时，import语句如下所示：

import { numberUtil } from './../../../utils/number_util';

哪个很长且不可读，最糟糕的是，难以维护：每当我需要移动editor_text_area时，我将不得不更新每个这些相对路径，在此期间我可以使用非

的相对方式

import { numberUtil } from 'utils/number_util';

有没有人对如何最好地进行模块导入以获得最高的可读性和可维护性有任何建议？

但是使用非相对方式会产生一个问题（除了官方文档不推荐之外）：如果我安装了npm模块，该模块与模块I＆＃39; m具有相同的名称输入？在这方面，它不像上面提到的丑陋替代品那样安全。

Answer 1

根据您的项目工具和结构，您有一些选择。

A）您可以将部分依赖项作为独立模块发布，可能在私有注册表中。然后，您可以使用npm安装它们，并像任何其他外部依赖项一样要求它们。

B）许多模块系统支持某种路径映射。 vue-js webpack template使用webpack＆＃39; s alias feature将@设置为源代码根目录。 TypeScript也支持path mapping。介绍该映射后，您可以使用

import { numberUtil } from '@/utils/number_util';

这种方法基本上为您的模块引入了一个私有命名空间。这是安全的，因为你只能使用名称为@的npm模块进行阴影，这是一个无效的名称，因此不能存在。

对于您的示例，您必须在compilerOptions：

中包含这些条目

"baseUrl": ".",
"paths": {
    "@/*": ["*"]
}

或者，如果您只想从utils导入模块，则可以将映射更改为"@/*": ["utils/*"]并使用'@/number_util'导入。

C）要考虑的另一件事是改善您的项目结构。根据您的实际项目，在某一点应用facade pattern可能是有意义的。可能inject依赖editor_text_area而不是让它自己导入。

Answer 2

您可以"baseUrl": "./src",添加tsconfig.json，

然后您可以import * as utils from 'utils'导入./src/utils/index.ts