为何未直接导入FileB却因其中缺失包报错？React导入疑问

目录结构 #

Directory
-> FileA.js
-> FileB.js
-> Index.js

Index.js 代码 #

import FileA from './FileA';
import FileB from './FileB';

export {
  FileA,
  FileB
};

问题原因 #

当你执行import { FileA } from '@/Directory'时，模块加载器（或Webpack、Vite这类打包工具）会优先加载@/Directory对应的入口文件Index.js。而Index.js中已经显式导入了FileB.js，不管你是否在组件里实际使用FileB，只要入口文件存在这个导入语句，加载器就会解析并执行FileB的代码，自然会触发FileB内部的依赖检查——你移除了它依赖的包，所以就会抛出缺失依赖的报错。

解决方案 #

1. 移除不必要的导入：如果不再需要导出FileB，直接删掉Index.js里和FileB相关的代码：

   import FileA from './FileA';
   
   export {
     FileA
   };
   

2. 使用按需导出语法：如果仍需保留FileB的导出，且希望打包工具能仅打包实际用到的模块（tree shaking），可以改用以下导出方式：

   export { default as FileA } from './FileA';
   export { default as FileB } from './FileB';
   

   这种语法下，支持tree shaking的打包工具会识别出你只用到了FileA，从而跳过FileB的加载。

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