自定义模块的相对与非相对模块导入

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

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

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

这很长且不可读，最糟糕的是，难以维护：每当我需要移动 editor_text_area 时，我将不得不更新这些相对路径，同时我只能使用非相对路径方式

import { numberUtil } from 'utils/number_util';

对于如何最好地进行模块导入以实现最高的可读性和可维护性，是否有人有任何建议？

---

但是使用非相对方式会带来一个问题（除了官方文档不推荐）：如果我安装了一个与我正在导入的模块同名的npm 模块怎么办？在这一点上，它不像上面提到的更丑陋的替代方案那样安全。

Answer 1

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

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

B) 许多模块系统支持某种路径映射。 vue-js webpack template 使用webpack 的alias feature 将@ 设置为源代码根。 TypeScript 也支持path mapping。引入该映射后，您可以使用

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

这种方法基本上为您的模块引入了一个私有命名空间。 这是安全的，因为您只能使用名称为 @ 的 npm 模块隐藏 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