* .defaultはコンストラクタではなく、インポートされたjsプラグインを使用しています

Question

私は単純なフォーム検証を作成しようとしました。しかし、それは絶対にうまくいかず、私はどのように続行するのか分かりません。

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

この "スクリプト" は、その後eslint-loaderとbabel-loader（プリセットENV &ステージ0）と、webpackによって生成されます。

メッセージを記録する面白さだけではありません。しかし、私はnew Proofr()を呼び出すしようとしたときに、それは、次の私に語った：

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

しかし、ithenされているもののコンストラクタではありませんか？これは空のオブジェクトです。少なくとも、これはcrome開発ツールが言っていることです。 私はjsファイルで私のプロジェクトと糸のリンクを介してリンクされている校正をインポートします。

import Proofr from 'proofr'; 

import PinguComponent from '../../assets/js/helpers/PinguComponent'; 

class Form extends PinguComponent { 
    constructor(el) { 
    const defaultOpts = { 
     classes: { 
     dom: {}, 
     state: {}, 
     }, 
     customEvents: {}, 
    }; 

    const defaultData = {}; 

    super(el, defaultOpts, defaultData); 

    new Proofr(); 

    this.log('Form loaded'); 
    } 
} 

export default Form; 

私の知る限りでは、おそらく誰かが非常に小さなタイプミスを見ている可能性があります。どちらのリポジトリも同じbabelrcを使用するので、同じプリセットを使用します。

ここでのWebPACKとバベルにより、あなたは自分でそれを見たい場合は、proofr（または糸proofr）をインストールNPMを経由して、それを追加することができ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; 

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

のためのファイルを生成し

Answer 1

変更WebPACKのビルドumdにoutput.libraryTargetを設定することで、あなたのproofrライブラリの設定：

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

https://webpack.js.org/configuration/output/#output-librarytarget Fを参照してください。またはそれ以上のオプション。

私はnpm run startでproofrを再構築することで、これをテストし、Node.jsのスクリプトでそれをインポート：output.libraryTarget: "umd"なし

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

：

$ node index.js 
{} 

それで：

バージョン

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