import module with global instance

Question

I'm looking at this react/flux example, and this guy is creating a dispatcher instance in one file like this:

// https://github.com/learncodeacademy/react-js-tutorials/blob/master/3-flux/src/js/dispatcher.js
import { Dispatcher } from "flux";
export default new Dispatcher;

And then using it in multiple other files by importing it. However, and this is the part that makes me uncomfortable, he uses it in each separate file as if it's all the same instance.

import dispatcher from "../dispatcher";
dispatcher.dispatch({type: "event"});

a separate file:

import dispatcher from "../dispatcher";
dispatcher.register(...);

It makes sense to me why it works for him, since he's using webpack to combine all the imports into one file. But what if I want to keep my files separate? Will this still work, or will I need to do something else to access the same dispatcher from multiple files?

Answer 1

Once the Webpack module system resolves a dependency, that is, once the "exports" of a module are evaluated, they are cached. No matter how many modules "import" those dependencies.

Meaning that this piece of code:

export default new Dispatcher;

... is only evaluated once through the life-cycle of the program.

Webpack does exactly what Node.js itself does. Modules are only evaluated once.