* .default不是构造函数，带有导入的js插件 [英] *.default is not a constructor, with a imported js plugin
问题描述
我尝试创建一个简单的表单验证，并通过示例项目中的yarn链接注册它来测试设置。但它绝对不起作用，我不知道如何继续。
I tried to create a simple form validation and registered this via yarn link in a example project to test the set up. But it absolutely doesn't work and I have no idea how to continue.
export default class Proofr {
constructor() {
console.log('test');
}
}
此脚本由<$ c生成$ c> webpack ， eslint-loader 和 babel-loader （预设env& ; stage-0）。
This "script" is then generated by webpack, with eslint-loader and babel-loader (presets env & stage-0).
所以它不应该只是为了记录消息的乐趣。但是当我尝试拨打新的Proofr（）时，它会告诉我以下内容：
So it shouldn't do much more than just for fun logging a message. But in when i try to call new Proofr() it tells me following:
form.js:25 Uncaught TypeError: _proofr2.default is not a constructor
但是如果它它不是一个构造函数是什么？这是一个空对象，至少这是crome开发工具所说的。
我导入的打样机通过纱线链接链接到我的项目在js文件中。
But if it is not a constructor what is ithen? It is a empty object, at least this is what the crome dev tools say. I import proofr which is linked via yarn link with my project in a js file.
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，因此它们使用相同的预设。
So am at the end of my knowledge, maybe someone sees the most possibly very small typo. Both repositories use the same babelrc so they use the same presets.
这里通过webpack和babel为校对者生成的文件
Here the by webpack and babel generated file for 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;
/***/ })
/******/ ]);
如果您想亲眼看到它，您可以通过npm安装打样机（或纱线打样机）添加它
If you want to see it by yourself you can add it via npm install proofr (or yarn proofr)
推荐答案
通过设置<更改 proofr 库的webpack构建配置code> output.libraryTarget to umd ：
Change the webpack build configuration of your proofr library by setting output.libraryTarget to umd:
output: {
filename: '[name]',
path: path.resolve(__dirname, '../dist'),
libraryTarget: "umd"
},
参见 https://webpack.js.org/configuration/output/#output-librarytarget 了解更多选项。
我通过使用 npm run start 重建打样机进行测试，并将其导入node.js脚本：
I tested this by rebuilding proofr with npm run start and imported it in a node.js script:
var proofr = require('proofr');
console.log(proofr);
没有 output.libraryTarget：umd ：
$ node index.js
{}
有了它：
$ node index.js
{ default: [Function: Proofr] }
这篇关于* .default不是构造函数，带有导入的js插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
