Веб-пакет JavaScript - как поделиться переменной между модулями?

Question

У меня есть код 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;

в модуле Common/Utils, который я хочу импортировать в модуль App/User как

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

, но доступ к нему и его обновление как Utils.myVar не работает и не объявляется как window.myVar через window модуль выше.

Что я должен сделать, чтобы эта переменная была разделена между модулями?

Answer 1

Я определил глобальную переменную как

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

тогда я смог получить к нему доступ и подписаться / опубликовать его.

Answer 2

экспорт вашего модуля как объекта:

var myVal = false;

// more stuff here

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

в этом случае myVal будет изменен для всех импортирующих модулей при переназначении module.exports.myVal, а не var myVal или наоборот.

Чтобы предотвратить такое поведение, сохраняйте значения в объекте, чтобы у вас была одинаковая ссылка на объект как в экспортированном модуле, так и во всем импортируемом:

var config = { myVal: false };

// more stuff here

module.exports = { config, /* more stuff here */ };

В этом случае вы можете свободно изменять реквизиты конфигурации (скажем, myVal), если только вы не переназначите Utils.config или var config.