Webpack与Node.js下ClassName/ClassName.js模块解析方案咨询

解决方案 #

构建工具配置方式 #

Webpack

Webpack 原生支持通过 resolve.mainFiles 配置修改目录入口的查找规则，该配置用于定义当导入路径指向目录时，Webpack 会按优先级顺序尝试匹配的文件名：

// webpack.config.js
module.exports = {
  // 其余配置保持不变
  resolve: {
    // 优先查找与目录同名的文件，找不到再回退到index.js
    mainFiles: (directory) => [directory, 'index']
  }
}

如果使用Webpack 4及更早版本，可以直接写成mainFiles: ['[name]', 'index']，也能达到同样效果。

Vite / Rollup

使用@rollup/plugin-node-resolve插件的自定义解析钩子即可实现，也可以直接配置Vite的resolve参数：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    // 自定义解析逻辑
    alias: [
      {
        find: /^@\/(\w+)\/?$/,
        replacement: '@/$1/$1.js'
      }
    ]
  }
})

Node.js 原生支持方式 #

Node.js 14.13.0及以上版本可以通过package.json的exports字段自定义导入规则：
你可以在每个类的目录下新增一个package.json文件，内容如下：

{
  "main": "./ClassName.js",
  "exports": "./ClassName.js"
}

该配置会让Node.js在导入./ClassName目录时，直接指向同目录下的同名文件，同时兼容ES Module和CommonJS规范。

零配置兼容方案（最推荐） #

如果不想修改构建工具和Node.js配置，担心影响第三方依赖的正常解析，可以采用目录下index.js做转发的折中方案，同时兼顾两种模式的优势：
在src/ClassName目录下保留index.js，内容仅做导出转发：

// src/ClassName/index.js
export * from './ClassName.js'
// 如果有默认导出，补充下面这行
export { default } from './ClassName.js'

这种方案不需要修改任何工具配置，兼容所有运行环境，同时满足：

• 按文件名搜索时可以直接定位到ClassName.js
• IDE标签页显示的文件名有辨识度，不会出现多个重复的index.js
• 导入路径依旧可以简写为import { ClassName } from './ClassName'
  是目前业内使用最广泛的实现方式。

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