避免在 ES6 JavaScript Web 项目中引入深层嵌套模块

Question

我正在尝试解决我目前在 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”和“abc1.js/xyz1.js”需要访问相同的功能。因此，如果该功能存在于“reducers.js”中，那么“abc1.js/xyz1.js”必须将其导入为“../../reducers.js”。如果该功能分为“abc1.js”和“xyz1.js”等，那么“reducers.js”将必须将它们中的每一个导入为“.\abc-component\components\abc1.js”和“ .\xyz 组件\组件\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 似乎是在我更改并运行“npm install”后缓存公共模块的旧版本。不确定它来自哪里，我确实通过运行“npm cache clean”清理了 npm 缓存 4）即使我只是在这个公共模块而不是 ES6 中编写旧的 javascript，webpack watch 也不会接收到这个文件的更改并重新- 渲染应用程序。

我想知道我是否可以就如何最好地解决这个问题提出一些想法。此外，关于我如何尝试使用本地模块解决问题并且异常失败的想法将非常有帮助。

Answer 1

解决此问题的一种方法是将通用代码放入节点模块中，然后像导入任何其他库一样导入它。

这与您建议的“lib”想法类似，但不需要相对导入。