避免在ES6 JavaScript web项目中进行深度嵌套模块导入

我正试图用我的JavaScript项目结构来解决目前的问题。我正在用webpack编写ES6语法。我当前的目录结构看起来像这个

project-dir
  |_ packages.json
  |_ webpack.config.js
  |_ html
  |  |_ ***
  |  |_ ***
  |_ js
     |_ app.js
     |_ routes
        |_ abc-component
        |  |_ components
        |  |  |_ abc1.js
        |  |  |_ abc2.js
        |  |_ index.js
        |
        |_ xyz-component
        |  |_ components
        |  |  |_ xyz1.js
        |  |  |_ xyz2.js
        |  |_ index.js
        |_ reducers.js

这是一个更简单的结构。但问题是"reducers.js"answers"abc1.js/xyz1.js"需要访问相同的功能。因此，如果该功能存在于"reducers.js"中，那么"abc1.js/xyz1.js"将不得不将其导入为"../../reducers.js"。如果该功能分为"abc1.js"answers"xyz1.js"等，那么"reducers.js"将必须将它们中的每一个导入为".''abc component''components''abc1.js"answers".''xyz component''comporters''xyz1.js"。第一种方式，感觉我正在向上走，第二种方式，感觉我好像在往上爬。代码也受文件布局结构的约束。这个目录结构可能会更深入，我们最终会得到非常丑陋的导入。

因此，对我来说，将reducers.js和"abc1/js/xyz1.js"共享的功能提取到不同的模块中是有意义的。在做这件事的时候，我想过把它放在另一个git回购中，但这个功能是非常特定于项目的，不想把它放进另一个回购中。

我尝试在"js"文件夹下创建一个"lib"文件夹，并将它的通用功能与packages.json文件一起放在该文件夹中。这样，我想我只需要将它作为"依赖项"添加到项目的package.json文件中，并带有"file:''lib''common"值。这样，它将在本地引用该模块。但这让我陷入了一大堆麻烦。我遇到的问题是：1）我无法在这个通用模块中编写ES6，因为webpack没有处理它。2）每次我在common.js中更改某些内容时，我都必须运行"npm install"。3）在我更改并运行"npm-install"后，npm似乎正在缓存一个旧版本的通用模块。不确定它是从哪里来的，我确实通过运行"npm缓存清理"来清理npm缓存4）即使我只是在这个通用模块而不是ES6中写旧的javascript，webpack watch也不会发现对这个文件的更改并重新呈现应用程序。

我想知道我是否能对如何最好地解决这个问题有一些想法。此外，思考一下我如何尝试使用本地模块解决问题，但却异常失败，这将非常有帮助。