In my React JS project I have configured a jsconfig.json such that I can recursively export nested directories and import a specific export from the base directory as follows:

jsconfig.json:

{
  "pilerOptions": {
    "jsx": "react",
    "baseUrl": "src"
  }
}

Project folder structure:

react-app
  src
    mon
    index.js
      services
        ServiceA.js
        ServiceB.js
        index.js
      ponents
        ComponentA.jsx
        index.js
    pages
      pageA
        PageA.jsx
        index.js
    App.jsx
    index.js
    

Now in each index.js I would export all from each file/folder. So for example in mon/services/index.js:

export * from 'mon/services/ServiceA.js';
export * from 'mon/services/ServiceB.js';

And in mon/index.js:

export * from 'mon/services';
export * from 'mon/ponents';

Now if I require ServiceA exported from ServiceA.js in the PageA.jsx file I could import it as follows:

// PageA.jsx
import {
  ServiceA
} from 'mon';

// ServiceA.js
export class ServiceA {
  doStuff () {
    // do stuff
  }
}

How can I setup my NodeJS server project to allow for similar exports and imports?

I'd like to do this for consistency between the FE and BE such that I can easily port over any FE code to my BE project without having to make any significant changes to exports and imports.

Edit: I managed to get it working using the answer by Besworks to which I awarded the bounty, however VS Code Intellisense wouldn't navigate to the export definition from the import statement until I added a jsconfig.json in the project root:

{
    "pilerOptions": {
        "baseUrl": "./src",
        "paths": {
            "#mon" : ["./mon/index.js"]
        }
    }
}

In my React JS project I have configured a jsconfig.json such that I can recursively export nested directories and import a specific export from the base directory as follows:

jsconfig.json:

{
  "pilerOptions": {
    "jsx": "react",
    "baseUrl": "src"
  }
}

Project folder structure:

react-app
  src
    mon
    index.js
      services
        ServiceA.js
        ServiceB.js
        index.js
      ponents
        ComponentA.jsx
        index.js
    pages
      pageA
        PageA.jsx
        index.js
    App.jsx
    index.js
    

Now in each index.js I would export all from each file/folder. So for example in mon/services/index.js:

export * from 'mon/services/ServiceA.js';
export * from 'mon/services/ServiceB.js';

And in mon/index.js:

export * from 'mon/services';
export * from 'mon/ponents';

Now if I require ServiceA exported from ServiceA.js in the PageA.jsx file I could import it as follows:

// PageA.jsx
import {
  ServiceA
} from 'mon';

// ServiceA.js
export class ServiceA {
  doStuff () {
    // do stuff
  }
}

How can I setup my NodeJS server project to allow for similar exports and imports?

I'd like to do this for consistency between the FE and BE such that I can easily port over any FE code to my BE project without having to make any significant changes to exports and imports.

Edit: I managed to get it working using the answer by Besworks to which I awarded the bounty, however VS Code Intellisense wouldn't navigate to the export definition from the import statement until I added a jsconfig.json in the project root:

{
    "pilerOptions": {
        "baseUrl": "./src",
        "paths": {
            "#mon" : ["./mon/index.js"]
        }
    }
}

• javascript
• node.js
• reactjs

Share Improve this question Follow edited Jun 20, 2022 at 19:16 MShakeG asked May 26, 2022 at 10:04 MShakeGMShakeG 70311 gold badge1111 silver badges5151 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3 +50

You can map exports in your package.json :

{
  "name": "@your-namespace/your-package",
  ...
  "exports": {
    ".": "./index.js",
    "./mon": "./mon/index.js"
  }
}

Then you can refer to the exports by name :

import { YourClass } from '@your-namespace/your-package';
import { AnotherClass } from '@your-namespace/your-package/mon';

Alternatively, if your submodules only need to be accessible from within your package, you could map imports instead of exports which would not need your package name prepended but must start with a # character. You don't need to explicitly specify each submodule either, you can map everything from within a folder with wildcard substitution :

{
  "name": "your-package",
  ...
  "imports": {
    "#mon": "./mon/index.js",
    "#mon/services": "./mon/services/index.js",
    "#mon/services/*": "./mon/services/*.js",
    "#shortcut": "./deeply/nested/path/to/module.js"
  }
}

And use them :

import { YourClass } from '#mon';
import * from '#mon/services';
import { AnotherClass } from '#mon/services/ServiceA';
import something from '#shortcut';

In the above example, #mon would be a reference to ./mon/index.js and #mon/services/ServiceA would point to ./mon/services/ServiceA.js.

If your node project is using "type": "module" in package.json, then the filestructure is exactly the same. However, importing from index files in ES modules is still behind an experimental flag:

https://nodejs/api/esm.html#customizing-esm-specifier-resolution-algorithm

So you would have to launch it with e.g.:

node --experimental-specifier-resolution=node src/index.js

---

$ tree src/
src/
├── mon
│   ├── index.js
│   ├── ServiceA.js
│   └── ServiceB.js
├── index.js
└── other
    ├── index.js
    ├── OtherA.js
    └── OtherB.js

src/index.js

import { serviceA, serviceB } from './mon';
import { otherA, otherB } from './other';

serviceA();
serviceB();
otherA();
otherB();

src/mon/index.js

export * from './ServiceA';
export * from './ServiceB';

`src/mon/ServiceA.js'

export const serviceA = () => console.log('***** ServiceA');