的WebPack UMD庫回報Object.default

Question

我正在寫一個lib用的WebPack使用這些設置：

output: { 
    path: path.join('build'), 
    filename: 'my_lib.js', 
    library: 'MyLib', 
    libraryTarget: 'umd' 
    }, 

MyLib中：

export default function() { 
    console.log('MyLib'); 
} 

的問題是，當我嘗試加載編譯/ my_lib.js在瀏覽器中，訪問MyLib的唯一方法是通過MyLib.default ...

任何想法？

Answer 1

如果你在問爲什麼？

如果您使用Babel來啓用ES6功能，那麼您可能正面臨着Babel5和Babel6之間的一種變化。

隨着Babel5你的代碼transpiled這樣：

'use strict'; 

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

exports['default'] = function() { 
    console.log('MyLib'); 
}; 

module.exports = exports['default']; 

但隨着Babel6你：

'use strict'; 

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

exports.default = function() { 
    console.log('MyLib'); 
}; 

你發現有什麼區別？

module.exports = exports['default']; 

這條線是在Babel6的killed。這決定：

要始終導出默認exports.default

如果你問任何想法要解決它？

您可以自己添加此行或使用某種babel plugin that adds it for you。

const myLib = function() { 
    console.log('MyLib'); 
}; 

export default myLib; 

module.exports = myLib;