如何导入一个webpack子模块？

Question

在我的设置中，我有一个反应组件作为名为'share-sheet'的npm包的一部分。它是由管理的WebPack这样：

webpack.config.js

... 
output: { 
    path: path.join(__dirname, '/dist'), 
    filename: 'bundle.js' 
}, 
entry: path.join(__dirname, 'src/index') 
... 

的package.json

... 
"main": "dist/bundle.js", 
... 

index.js

import FancyButton from 'components/FancyButton' 
import FancyHellicopter from 'components/FancyHellicopter' 

console.log(`my fancy button component: ${FancyButton}`) 

module.exports = { FancyButton, FancyHellicopter } 

在另一方面我有一个web应用，它也使用的WebPack，这是设置为这样：

app.js

import _ from 'lodash' 
import sharesheet from 'share-sheet' 
console.log(_) // outputs the lodash object correctly. 
console.log(sharesheet) // outputs empty object. 
console.log(sharesheet.FancyButton) // outputs undefined. 

一旦予运行app.js，共享内的线-sheet的index.js在控制台中正确打印，但一旦进入app.js本身，共享表就是一个空对象。因此，在导入共享表模块后，以某种方式在module.exports导出的对象不会返回。究竟是什么错误？

Answer 1

这是因为webpack不知道'share-sheet'包的导出策略。配置output.libraryTarget至commonjs2应解决问题。

webpack.config.js

... 
output: { 
    path: path.join(__dirname, '/dist'), 
    filename: 'bundle.js', 
    libraryTarget: 'commonjs2' // <---------- 
}, 
entry: path.join(__dirname, 'src/index') 
... 

您可以找到有关here用的WebPack建馆更多的信息。