如何导入 webpack 子模块?

马贝丹

在我的设置中,我有一个 React 组件作为名为“share-sheet”的 npm 包的一部分。它由 webpack 管理,如下所示:

webpack.config.js

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

包.json

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

索引.js

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

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

module.exports = { FancyButton, FancyHellicopter }

另一方面,我有一个 webapp,它也使用 webpack,它是这样设置的:

应用程序.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一旦导入共享表模块就不会返回导出的对象究竟有什么问题?

奥的斯周

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

webpack.config.js

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

您可以在此处找到有关使用 webpack 构建库的更多信息

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章