javascript - exports - Llamar a la función/clase incluida en el paquete web desde console.log

webpack version

Question

¿Es posible acceder a los módulos exportados (ES6-> ES5 compilados) desde la consola del inspector web? Se agrupan utilizando un paquete web

Intento llamar a 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

Answer 1

1) Abra su devtools, el panel "Fuentes".

2) abra el webpack:// en la pestaña del explorador, verá los archivos ES6 originales gracias a los mapas de origen.

Puede configurar puntos de interrupción, acceder a variables ...

Answer 2

Si no desea agregar un código especial a su aplicación. Puedes seguir estos pasos:

• Coloque un punto de interrupción donde use el servicio / clase que luego desea depurar
• En la consola, guárdelo en la ventana, por ejemplo window.myService = this.props.myService
• Use la referencia guardada en la ventana

Answer 3

Sí.

Agregue el siguiente código a algún módulo en paquete:

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

Use require desde la consola:

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

EDITAR:

En TypeScript utilizamos:

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

Actualmente estoy instanciando / obteniendo mis servicios de esta manera:

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