Question

在我的设置中，我有一个反应组件作为npm包的一部分，名为＆＃39; share-sheet＆＃39;。它由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 }

另一方面，我有一个webapp，它也使用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，共享表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构建库的更多信息。

如何导入webpack子模块？

1 个答案: