为什么使用带有babel的webpack导入具有命名导出的默认导出会导致错误？

Question

我有2个构造函数，SignUp和GoogleSignIn。在结构上，他们是这样的：

import SignUp, {gapi_promise} from "./SignUp"; 
/** 
* 
* @param element 
* @extends SignUp 
* @constructor 
*/ 
function GoogleSignIn(element){ 

    SignUp.call(this); 
} 

GoogleSignIn.prototype = Object.create(SignUp.prototype); 

export default GoogleSignIn; 

和

function SignUp(){ 
    //Some constructor code 
} 

export let gapi_promise = (function(){ 

    return new Promise((resolve, reject) => { 
     //Do some promise stuff with the google api 
    }); 
}()); 

export default SignUp; 

我一直在使用的WebPack与巴贝尔装载机捆绑这些和其他资产一起，但是当我打开我的网页出现错误：

GoogleSignIn.js?1051**:21 Uncaught TypeError: Cannot read property 'prototype' of undefined(…) 

基本上，SignUp的值是未定义的。我是否错误地导入或导出值？

具体地，失败的线是这一个：

GoogleSignIn.prototype = Object.create(SignUp.prototype); 

我可以在必要时提供额外的细节。非常感谢你！

Answer 1

这可能是因为您使用的是Babel 6，它根据ES6规范编译模块。如果是这种情况，有两种解决方法：

1.更改GoogleSignIn.prototype = Object.create(SignUp.prototype); 到GoogleSignIn.prototype = Object.create(SignUp.default.prototype);

2.使用这个插件（https://www.npmjs.com/package/babel-plugin-add-module-exports），感受一下老出口行为回来。

您可以参考Babel 6 changes how it exports default