javascript - 更改 JavaScript 中的默认文件分辨率

Question

在 JavaScript 项目中，可以导入名为 index.js 的文件，如下所示:

import SomeComponent from 'components/some-component'

而不必指定 index.js。

在我的项目中，我更喜欢使用不同的命名约定:some-component.component.js。这样我一眼就能看出文件是什么(而不是拥有一百万个 index.js)。

我想要实现的目标是对于具有模式 *.component.js 的文件发生相同的导入模式。换句话说:

import SomeComponent from 'components/some-component'

而不是

import SomeComponent from 'components/some-component/some-component.component.js'

我有以下(缩写)jsconfig.json:

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

关于如何实现这一目标有什么想法吗？

提前致谢!

Answer 1

简短回答:您无法使用函数(或 RegExp)自定义导入解析。对于 Web 项目，您可以使用 Webpack 之类的工具和自定义加载器。但是，这是一个特定于 Webpack 的解决方案，无法与其他工具一起使用(例如在 VSCode 中按住 Ctrl 键单击，或直接使用 TSC)。

长答案:

JavaScript 文件的分辨率取决于您使用的工具。这些年来，标准发生了一些变化，虽然事情正在向 ESM 靠拢，但仍然存在很多不一致之处。

TypeScript 模块分辨率描述如下:https://www.typescriptlang.org/docs/handbook/module-resolution.html 您可以拥有一个 baseUrl，将多个目录合并为一个 (rootDirs)，或者拥有有限的通配符 path 映射 ( https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping )。您已经在问题中使用过它，所以我可能不会告诉您任何新内容。但是，TS 配置选项就到此为止了。 (您可以使用 TSC API 自定义编译模块分辨率，但不能从 CLI/工具配置选项中自定义)

NodeJS 可以为模块 Hook 解析机制。例如，Yarn 2+ 这样做是为了支持称为 PNP ( https://yarnpkg.com/features/pnp ) 的功能。但是，TypeScript 仍然需要解析类型，并且它不会使用您的自定义加载机制。 Webpack 等其他工具的情况类似。

Node 和 TypeScript 的模块解析特定于这些工具。 ESM 标准更加严格:from 部分必须是绝对或相对 URL，或者是需要使用导入映射进行映射的“裸标识符”。换句话说，您无法使用自定义算法来解析路径。导入 map 标准存储库中描述了这样做的理由:https://github.com/WICG/import-maps#a-programmable-resolution-hook

结论:如果您真的非常想要进行自定义模块解析，您可以使用 TSC API 创建自己的 CLI。这可能不适用于其他工具，并且可能更容易习惯其他命名约定。