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;

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

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

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

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

Answer 1

将模块导出为对象：

var myVal = false;

// more stuff here

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

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

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

var config = { myVal: false };

// more stuff here

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

在这种情况下，除非重新分配Utils.config或var config本身，否则您可以自由修改配置道具（例如myVal）。

Answer 2

我最终定义了像这样的全局变量

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

然后我可以访问它并进行订阅/发布。

JavaScript Webpack-如何在模块之间共享变量？

2 个答案: