JavaScript 如何在模块之间共享变量?

Question

我在webpack构建后有JavaScript代码。

bundle.js的代码如下所示：

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };
/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/        // Flag the module as loaded
/******/        module.loaded = true;
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }

/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "rainloop/v/0.0.0/static/js/min/";
/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/*!********************!*
!*** ./dev/bundle.js ***!
********************/
/***/ function(module, exports, __webpack_require__) {
__webpack_require__(/*! bootstrap */ 74)(__webpack_require__(/*! App/User */ 6));
/***/ },
/* 1 */
/*!*************************!*
!*** ./dev/Common/Utils.js ***!
*************************/
/***/ function(module, exports, __webpack_require__) {

(function () {
.... code for Utils.js module ...
module.exports = Utils;
}());
/***/ },
/* 2 */
/*!***************************!*
!*** external "window._" ***!
***************************/
/***/ function(module, exports, __webpack_require__) {
module.exports = window._;
/***/ },
/* 6 */
/*!*************************!*
!*** ./dev/App/User.js ***!
*************************/
/***/ function(module, exports, __webpack_require__) {

(function () {
... code for App/User.js module ....
module.exports = new AppUser();
}());
/***/ },

等等。

然后我试图宣布

var myVar;

在我想在App/User模块中导入的Common/Utils模块中

Utils = __webpack_require__(/*! Common/Utils */ 1)

但是访问它并按Utils.myVar更新不起作用，也没有通过上面的window模块将其声明为window.myVar。

我应该怎么做才能在模块之间共享该变量？

Answer 1

将模块导出为对象：

var myVal = false;
// more stuff here
module.exports = { myVal, /* more stuff here */ };

在这种情况下，当您重新分配module.exports.myVal时，所有导入模块的 myVal 都会更改，而不是var myVal，反之亦然。

为了防止此行为，请将值存储在对象中，因此在导出模块和所有导入中都将具有相同的对象引用：

var config = { myVal: false };
// more stuff here
module.exports = { config, /* more stuff here */ };

在这种情况下，你可以自由修改配置道具(比如myVal(，除非你重新分配Utils.config或var config本身。

Answer 2

我最终定义了全局变量，例如

(function() {window.RL.myVal = new ko.subscribable(); })(window.RL = window.RL || {});

然后我能够访问它并订阅/发布它。