Webpack exportiert ES6-Klassen nicht ordnungsgemäß?

Question

Beim Debuggen eines größeren Problems habe ich ein Barebone-Modul und eine Webpack-Konfiguration entwickelt, die ES6-Klassen fehlerhaft zu exportieren scheint.

Das Modul (index.js):

module.exports = class Foo { 
    constructor() { 
     console.log('foo!'); 
    } 
} 

Und webpack.config.js:

module.exports = { 
    target: 'node', 
    entry: './index.js', 
    output: { 
     filename: 'bundle.js' 
    } 
}; 

Der Ausgang (bundle.js) ist:

/******/ (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] = { 
/******/   i: moduleId, 
/******/   l: false, 
/******/   exports: {} 
/******/  }; 
/******/ 
/******/  // Execute the module function 
/******/  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 
/******/ 
/******/  // Flag the module as loaded 
/******/  module.l = 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; 
/******/ 
/******/ // define getter function for harmony exports 
/******/ __webpack_require__.d = function(exports, name, getter) { 
/******/  if(!__webpack_require__.o(exports, name)) { 
/******/   Object.defineProperty(exports, name, { 
/******/    configurable: false, 
/******/    enumerable: true, 
/******/    get: getter 
/******/   }); 
/******/  } 
/******/ }; 
/******/ 
/******/ // getDefaultExport function for compatibility with non-harmony modules 
/******/ __webpack_require__.n = function(module) { 
/******/  var getter = module && module.__esModule ? 
/******/   function getDefault() { return module['default']; } : 
/******/   function getModuleExports() { return module; }; 
/******/  __webpack_require__.d(getter, 'a', getter); 
/******/  return getter; 
/******/ }; 
/******/ 
/******/ // Object.prototype.hasOwnProperty.call 
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 
/******/ 
/******/ // __webpack_public_path__ 
/******/ __webpack_require__.p = ""; 
/******/ 
/******/ // Load entry module and return exports 
/******/ return __webpack_require__(__webpack_require__.s = 0); 
/******/ }) 
/************************************************************************/ 
/******/ ([ 
/* 0 */ 
/***/ (function(module, exports, __webpack_require__) { 

module.exports = __webpack_require__(1); 


/***/ }), 
/* 1 */ 
/***/ (function(module, exports, __webpack_require__) { 

"use strict"; 


module.exports = class Foo { 
    constructor() { 
     console.log('foo!'); 
    } 
} 


/***/ }) 
/******/ ]); 

Wenn ich versuche, die Foo Klasse zu verwenden aus dem Bündel bekomme ich Dieser Fehler:

Es funktioniert gut mit dem Quellcode, aber nicht die gebündelte Version. Was mache ich falsch mit der Webpack-Konfiguration?

EDIT: Ich habe festgestellt, dass ich die Klasse in ein Objekt wickeln muss, um es ordnungsgemäß funktionieren zu lassen. Ich habe ein paar andere Datentypen getestet (Export von Funktionen, Zahlen usw.) und es scheint, dass Sie ein Objekt exportieren müssen, damit es richtig funktioniert.

Answer 1

nur benötigt, um dies in die Webpack Config hinzuzufügen:

output: { 
    libraryTarget: 'umd' 
}