时间戳

首页 > 解决方案 > 使用 Webpack 和 Node.js 的 ClassName/ClassName.js 模块解析

javascript - 使用 Webpack 和 Node.js 的 ClassName/ClassName.js 模块解析

问题描述

我经常在 Javascript 项目中看到以下目录结构和导入模式：

类名/index.js 模式

RepoRoot
|-src
  |-index.js
  |-ClassName
    |-index.js
    |-SupportingClass.js

src/ClassName/index.js

import { SupportingClass } from './SupportingClass';
export class ClassName {
  // Implementation
}

src/index.js

import { ClassName } from './ClassName';

这一切都很好，花花公子。它允许更清晰地导入 ClassName 类。但是，我不喜欢类文件index.js的名称与类的名称不同。它：

  1. 使在文件名搜索中定位文件变得更加困难（VS Code 中的 Command+P）
  2. 您最终index.js会在 IDE 的文件选项卡中得到一个非常无用的信息（是的，我知道一些 IDE 足够聪明，可以在您打开多个同名文件时添加更多上下文。这有帮助，但不是一个真正的解决方案imo）
  3. 其他非索引文件的名称更具描述性：SupportingClass.js、someUtils.js 等。

ClassName/ClassName.js 模式

RepoRoot
|-src
  |-index.js
  |-ClassName
    |-ClassName.js
    |-SupportingClass.js

src/ClassName/ClassName.js

import { SupportingClass } from './SupportingClass';
export class ClassName {
  // Implementation
}

src/index.js

import { ClassName } from './ClassName/ClassName';

这解决了我提出的所有问题，但使 ClassName 的导入有点重复。对大多数人来说可能没什么大不了的，尤其是现在你的 IDE 能够为你自动导入东西。

然而...

webpack 和 node.js 如何理解开箱即用的如何解释导入路径：

是否有允许它解释的设置或插件：

多年来我一直想知道这样的东西是否存在，但从来没有真正找到任何关于它的文献。好奇这里是否有人知道任何事情。

标签： javascriptnode.jswebpack

解决方案

您正在处理命名导入和默认导入，可以在此处找到有关此讨论的更多详细信息：

如何从 ES6 模块导入默认和命名

根据您的情况（我没有尝试使用子文件夹，但它应该可以），您可能希望这样组织您的文件：

RepoRoot
|-src
  |-index.js
  |-ClassName
    |-ClassName.js (named module)
    |-SupportingClass.js (named module)
    |-index.js (default modules)

然后你可以很容易地在src/index.js中导入你的东西，例如：

import ClassName, SupportingClass, { otherValues } from './ClassName'

推荐阅读