使用全局实例导入模块

Question

我正在看这个 react/flux 示例，这个人正在这样的一个文件中创建一个调度程序实例：

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

然后通过导入在多个其他文件中使用它。然而，这是让我不舒服的部分，他在每个单独的文件中都使用它，就好像它们都是同一个实例一样。

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

一个单独的文件：

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

这对我来说很有意义，因为他正在使用 webpack 将所有导入合并到一个文件中。但是，如果我想将我的文件分开怎么办？这仍然有效，还是我需要做其他事情才能从多个文件访问同一个调度程序？

Answer 1

一旦 Webpack 模块系统解析了依赖关系，也就是说，一旦评估了模块的 "exports"，它们就会被缓存。不管模块有多少"import"那些依赖。

意思就是这段代码：

export default new Dispatcher;

...在程序的整个生命周期中只评估一次。

Webpack 所做的正是 Node.js 本身所做的。模块只评估一次。

使用全局实例导入模块

import module with global instance

javascript

typescript

es6-modules