如何在JavaScript中修改默认文件解析规则支持*.component.js短路径导入

要实现 *.component.js 文件的短路径导入，需要同时处理编辑器路径识别和打包工具模块解析两个环节，只修改 jsconfig.json 只能解决编辑器不飘红报错，运行时还是会出现模块找不到的问题。具体配置方法如下：

1. 调整 jsconfig.json 配置 #

修改配置文件添加自定义路径匹配规则，让编辑器可以正确识别导入路径对应的文件：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "moduleResolution": "node",
    "paths": {
      "components/*": [
        "./components/*/*.component.js",
        "./*"
      ],
      "*": ["./*"]
    }
  }
}

配置生效后建议重启编辑器的 TS 服务（VSCode 按 Ctrl+Shift+P 选择「TypeScript: Restart TS Server」）即可看到正确的智能提示。

2. 配置打包工具的模块解析规则 #

根据你项目使用的打包工具，添加对应的自定义解析逻辑即可：

场景1：Webpack 项目

在 webpack.config.js 中添加自定义解析插件：

const path = require('path');
const fs = require('fs');

module.exports = {
  // 其余原有配置保持不变
  resolve: {
    plugins: [
      {
        apply(resolver) {
          resolver.getHook('before-resolve').tapAsync('ComponentResolver', (request, _, callback) => {
            if (request.request.startsWith('components/')) {
              const dirName = request.request.split('/').pop();
              const targetFile = path.resolve(__dirname, 'src', request.request, `${dirName}.component.js`);
              fs.access(targetFile, fs.constants.F_OK, (err) => {
                if (!err) request.request = targetFile;
                callback();
              });
              return;
            }
            callback();
          });
        }
      }
    ]
  }
}

如果是用 Create React App 未 eject 的项目，可以通过 customize-cra 注入上述配置。

场景2：Vite 项目

在 vite.config.js 中添加自定义解析插件：

import { defineConfig } from 'vite';
import path from 'path';
import fs from 'fs/promises';

export default defineConfig({
  // 其余原有配置保持不变
  plugins: [
    {
      name: 'component-resolver',
      async resolveId(id) {
        if (id.startsWith('components/')) {
          const dirName = id.split('/').pop();
          const targetFile = path.resolve(__dirname, 'src', id, `${dirName}.component.js`);
          try {
            await fs.access(targetFile);
            return targetFile;
          } catch {}
        }
      }
    }
  ]
})

可选替代方案 #

如果不想修改打包配置，可以在每个组件目录下新增一个 index.js 做中转导出，内容示例如下：

// components/some-component/index.js
export { default } from './some-component.component.js';
// 如果有命名导出也可以补充
export * from './some-component.component.js';

这种方式不需要修改任何工具配置，适合小型项目使用，缺点是每个组件都要新增一个中转文件，维护成本稍高。

内容的提问来源于stack exchange，提问作者rubrics44