What happens when you do "import someModuleName from someModule" in Javascript

Question

I understand that when you want to reuse a module at several places. You do: module.exports = yourModuleClassName in to make that module exportable.

Next, when you want to use it in other places, you simply import it, like so: import yourModuleClassName from 'yourmodulePath'

I totally understand the above concept and I have no doubts in that. Today, I am more concerned about, What happens when you import a package:

Like importing redux-form package:

So first I do: npm install redux-form

What happens next is I do: import redux-form from redux-form to use it in my module.

Now, When I look into an npm installed package. For example; when I look into the redux-form folder under my node-modules folder. It's a complete project with a server.js and package.json of its own, same happens with other npm package installs also. I totally get that they are an independent modules(but a bigger one) and they work in the same way as my local independent modules.

But I didn't find any module.exports there, so how are they importable. Of course, NODEJS is doing some magic to make them importable all across my projects. But, how exactly it is doing that. Let's say I keep a module inside my node_modules folder, but I don't it to be importable(I know no body would do it, Just curious!). If NODE is responsible to make it importable, how does it take care about the files which I don't want importable, but I want them to lie in the node_modules folder.

Moreover, these modules have there own server.js and webpack.configs do they get executed when I call import on those packages, if not then how exactly do they work.

I asked this question because I am trying to make an independent npm package, and I want to understand how they work. There is a similar question; What happens when you import a package? but it is more inclined toward python. Can anyone explain this question for NODEJS. If there are any available resorces online, please guide me there, I will highly appreciate that.

Thanks and Regards.

Answer 1

When you import a package installed with npm, node follows these steps:

1. It finds the first node_modules folder which
   • is contained in an ancestor folder of the file you are importing the package from AND
   • contains a folder named as the package you are importing
2. If the package has a package.json file and that file has a main field,
   • node loads the file set in the main field
3. Otherwise, node loads the index.js file.

(Source: https://nodejs.org/api/modules.html#modules_all_together)

---

Moreover, these modules have there own server.js and webpack.configs do they get executed when I call import on those packages, if not then how exactly do they work.

webpack.config.js is the configuration for Webpack, a build tool. Webpack is only executed by the developer of redux-form before publishing the package on npm: when you npm install it, it is already built/compiled

Inside a node package, server.js is just a normal file (like foo.js). It has a special meaning only if it is in your application root: it gets executed when you run npm start.

---

PS You are mixing two ways of using modules: CommonJS and ES6. It works because you are transpiling your modules (maybe using Babel, or any other transpiler), but it might not work when node will natively support ES6 modules.

Which are the differences between CommonJS and ES6 modules?

// commonjs
module.exports = yourModuleClassName;
// ES6
export default yourModuleClassName;

// commonjs
exports.something = yourExportedVariable;
// ES6
export { yourExportedVariable as something }

// commonjs
var importedModule = require("module-path");
// ES6
import importedModule from "module-path";

// commonjs
var something = require("module-path").something;
// ES6
import { something } from "module-path";