从 console.log 调用 webpack 捆绑的函数/类答案

【问题标题】：Call webpack bundled function/class from console.log从 console.log 调用 webpack 捆绑的函数/类
【发布时间】：2016-04-18 21:44:34
【问题描述】：

是否可以从 Web 检查器控制台访问导出的模块（ES6->ES5 编译）？它们使用 webpack 捆绑在一起

我正在尝试调用 Session.setSessionInLocalStorage('test key', 'test object');

/******/ (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 = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/*!*********************!*\
  !*** ./app/main.js ***!
  \*********************/
/***/ function(module, exports, __webpack_require__) {

	'use strict';
	
	var _CoreUtils = __webpack_require__(/*! ./Core/utils/session/Core.utils.Session */ 4);
	
	var mySession = new _CoreUtils.Session();
	
	mySession.setSessionInLocalStorage('key', 'my object');

/***/ },
/* 1 */,
/* 2 */,
/* 3 */,
/* 4 */
/*!******************************************************!*\
  !*** ./app/Core/utils/session/Core.utils.Session.js ***!
  \******************************************************/
/***/ function(module, exports) {

	"use strict";
	
	Object.defineProperty(exports, "__esModule", {
	    value: true
	});
	
	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
	
	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
	
	var Session = function () {
	    function Session(sessionId) {
	        _classCallCheck(this, Session);
	
	        this.sessionId = sessionId;
	    }
	
	    _createClass(Session, [{
	        key: "getSessionFromLocalStorage",
	        value: function getSessionFromLocalStorage(sessionKey) {
	            return localStorage.getItem(sessionKey);
	        }
	    }, {
	        key: "setSessionInLocalStorage",
	        value: function setSessionInLocalStorage(sessionKey, sessionData) {
	            localStorage.setItem(sessionKey, JSON.stringify(sessionData));
	        }
	    }]);
	
	    return Session;
	}();
	
	exports.Session = Session;

/***/ }
/******/ ]);
//# sourceMappingURL=app.js.map

【问题讨论】：

标签： javascript module console export webpack

【解决方案1】：

是的。

将以下代码添加到捆绑包中的某个模块：

require.ensure([], function () {
    window.require = function (module) {
        return require(module);
    };
});

从控制台使用 require：

require("./app").doSomething();

编辑：

在 TypeScript 中我们使用：

(require as any).ensure([], () => {
    window["require"] = module => require(module);
});

我目前正在以这种方式实例化/获取我的服务：

var contactsService= (new (require("./app").default)).contactsService;

【讨论】：

【解决方案2】：

1) 打开您的开发工具，即“源”面板。

2) 在资源管理器选项卡中打开 webpack://，您将看到原始 ES6 文件，这要归功于源映射。

您可以设置断点，访问变量...

【讨论】：

好吧，我在 webpack:// 下看到了。我知道我可以设置断点等...我想从控制台执行该功能？是不是有一个全局窗口对象/命名空间让我从控制台访问我的模块并调用它？例如从控制台执行这个？ Session.setSessionInLocalStorage('test key', 'test object');
在这个类+方法可以访问的地方放一个断点，然后执行函数。在您的情况下，如果您还没有 Session，请在某处导入 Session，然后您就可以在控制台中使用它。

【解决方案3】：

如果您不想向您的应用添加特殊代码。您可以按照以下步骤操作：

在您使用稍后要调试的服务/类的位置放置一个断点
在控制台中，将其保存在窗口中，例如window.myService = this.props.myService
在窗口中使用保存的参考

【讨论】：