桶文件、webpack 和 jest

Question

我对桶文件、webpack 和 jest 有几个问题。我从来没有真正想过它们是如何工作的，现在我正在努力（开玩笑地）在一个还没有测试的更大的应用程序上编写测试。

我在大文件夹（如components）中有桶文件，它们看起来像这样：

/组件/index.js

export { default as ComponentA } from './ComponentA';
export { default as ComponentB } from './ComponentB';
export { default as ComponentC } from './ComponentC';

通过这样的设置，我可以轻松导入这些组件，如下所示：

import { ComponentA, Component C } from '/components';

而不是写

import Component A from '/components/ComponentA';
import Component C from '/components/ComponentC';

我的主要问题：在我的 webpack 捆绑文件中，是否会仅仅因为我有 ComponentB 文件components/index.js（但我并没有真正使用它）而包含它？

当我开始用 jest 编写测试并开始向我抛出有关我尚未编写测试的文件的错误时，我想到了这一点。我试图搜索原因，我能找到的唯一原因是我从更大的文件中的桶文件导入（例如，我ComponentA在构建页面时从桶文件导入 - 我现在正在尝试测试）。

Answer 1

应该支持桶导入，至少如果您使用 ts-jest 转换。参考：https: //github.com/kulshekhar/ts-jest/issues/1149

但我鼓励桶类型定义 src/types/index.d.ts 出现类似问题，通常在代码库中引用为 @/types

我最终配置了额外的 moduleNameMapper 定义

 moduleNameMapper: {
    // FIXES Could not locate module @/types mapped as: .../src/types.
    '^@/types$': '<rootDir>/src/types/index.d',
  },

希望这会对某人有所帮助:)