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

Question

I am trying to tackle that I am currently have with my JavaScript project structure. I am writing ES6 syntax with webpack. My current directory structure looks like this

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

This is simpler structure. But the problem is that the "reducers.js" and the "abc1.js/xyz1.js" need access to the same functionality. So, if that functionality lives in "reducers.js" then the "abc1.js/xyz1.js" would have to import it as "../../reducers.js". If that functionality lives split up in "abc1.js" and "xyz1.js" etc, then "reducers.js" will have to import each one of them as ".\\abc-component\\components\\abc1.js" and ".\\xyz-component\\component\\xyz1.js". The first way, it feels like i am reaching way up and the second way, it feels like i am reaching way up. The code is also constrained to the structure of the file layout. This directory structure could go deeper down and we will end up with very ugly imports.

So, it makes sense for me to pull out this functionality that is shared by reducers.js and "abc1/js/xyz1.js" into a different module. In doing that i thought about putting that in a another git repo, but this functionality is very project specific and didn't want the hassle of putting it in another repo.

I tried creating a "lib" folder under the "js" folder and put the common functionality it in that folder along with a packages.json file. That way, i thought i would just add it as a "dependencies" in the project's package.json file with the "file:\\lib\\common" value. This way, it will reference that module locally. But this landed me in a load of trouble. The problems i am encountering are 1) I couldn't write ES6 in this common module since webpack is not processing it 2) Everytime I change something in the common.js, i have to run "npm install" 3) npm seems to be caching an old version of the common module ever after i change it and run "npm install". Not sure where it comes from, i did clean the npm cache by running "npm cache clean" 4) Even when i just write old javascript in this common module and not ES6, webpack watch does not pick up on changes to this file and re-render the app.

I was wondering if i could get some thoughts on how best to go about solving this problem. Also, thoughts about how i tried and exceptionally failed in solving the problem with a local module would be very helpful.

Answer 1

One way to deal with this is to put your common code into a node module and just import it like you would any other library.

This would work similarly to the "lib" idea you suggested but without needing relative imports.