* .default ist kein Konstruktor, mit einem importierten js plugin

Question

Ich habe versucht, eine einfache Form Validierung zu erstellen und registriert dies über Garn Link in einem Beispielprojekt, um das Setup zu testen. Aber es funktioniert absolut nicht und ich habe keine Ahnung, wie ich weitermachen soll.

export default class Proofr { 
    constructor() { 
    console.log('test'); 
    } 
} 

Das "Script" wird dann durch webpack erzeugt, mit eslint-loader und babel-loader (Voreinstellungen env & Stufe-0).

So sollte es nicht viel mehr als nur zum Spaß Protokollierung einer Nachricht tun. Aber in, wenn ich versuche new Proofr() zu nennen es sagt mir folgendes:

form.js:25 Uncaught TypeError: _proofr2.default is not a constructor 

Aber wenn es nicht ein Konstruktor, was ist Ithen? Es ist ein leeres Objekt, zumindest das, was die crome dev tools sagen. Ich importiere Proofer, der über einen Link mit meinem Projekt verlinkt ist, in einer js-Datei.

So bin ich am Ende meines Wissens, vielleicht sieht jemand den möglicherweise sehr kleinen Tippfehler. Beide Repositories verwenden den gleichen babelrc, so dass sie dieselben Voreinstellungen verwenden.

Hier wird die von webpack und babel generierte Datei für Proofr

/******/ (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__) { 

"use strict"; 


Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 

/** 
* Proofr a lightweight js tool 
*/ 

var Proofr = function Proofr() { 
    _classCallCheck(this, Proofr); 

    console.log('test'); 
}; 

exports.default = Proofr; 

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

Wenn Sie es selbst sehen wollen Sie es über npm installieren Proofr hinzufügen können (oder Garn Proofr)

Answer 1

Ändern Sie den webpack build Konfiguration Ihrer proofr Bibliothek, indem output.libraryTarget-umd:

output: { 
    filename: '[name]', 
    path: path.resolve(__dirname, '../dist'), 
    libraryTarget: "umd" 
}, 

Siehe https://webpack.js.org/configuration/output/#output-librarytarget f oder mehr Optionen.

Getestet habe ich diese durch Proofr mit npm run start und importiert sie in einem node.js Skript Wiederaufbau:

var proofr = require('proofr'); 
console.log(proofr); 

Ohne output.libraryTarget: "umd":

$ node index.js 
{} 

Mit ihm:

$ node index.js 
{ default: [Function: Proofr] }