Change the Default File Resolution in JavaScript-CodePudding

In a JavaScript project, a file titled index.js can be imported as such:

import SomeComponent from 'components/some-component'

Rather than having to specify index.js.

In my project, I prefer to use a different naming convention: some-component.component.js. This way I can tell what the file is from a glance (rather than having a million index.js).

What I'm trying to achieve is having this same import pattern happen for files with the pattern *.component.js. In other words:

import SomeComponent from 'components/some-component'

Rather than

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

I have the following (abbreviated) jsconfig.json:

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

Any ideas on how this could be achieved?

Thanks in advance!

CodePudding user response：

Short answer: you can't customize the import resolution using a function (or RegExp). For a web project, you may use a tool like Webpack with a custom loader. But, that is a Webpack specific solution that will not work with other tools (like doing Ctrl-click in VSCode, or using TSC directly).

Long answer:

The resolution of the JavaScript files depends on the tools you use. The standards changed a little bit over the years, and while things are converging to ESM there are still a lot of inconsistencies.

The TypeScript module resolution is described here: https://www.typescriptlang.org/docs/handbook/module-resolution.html You can have a baseUrl, merge multiple directories as one (rootDirs), or have a limited wildcard path mapping (https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping). You already used it in your question, so probably I'm not telling you anything new. But, that's where the TS configuration options end. (you can customize the compilation module resolution using the TSC API, but not from the CLI/tools config options)

NodeJS can hook a resolution mechanism for modules. For example, Yarn 2 does that to support a feature called PNP (https://yarnpkg.com/features/pnp). However, TypeScript still needs to resolve types and it will not use your custom loading mechanism for that. The situation with other tools like Webpack is similar.

The module resolution of Node and TypeScript are specific to those tools. The ESM standard is even more strict: the from part must be an absolute or relative URL, or a "bare identifier" that you need to map using an import map. In other words, you can't have a custom algorithm to resolve paths. The justification for that is described in the Import Maps standard repo: https://github.com/WICG/import-maps#a-programmable-resolution-hook

Conclusion: if you really-really want to do a custom module resolution, you may be able to create your own CLI using the TSC API. That may not work with other tools, and is probably easier to get used to another naming convention.