暴露组件，以便它们可以在应用程序中动态导入

Question

我正在构建一个要导入到 React 应用程序中的组件库。我想公开这些组件，以便它们可以在应用程序中动态导入。

我试过的：

库 > index.js

export const Component1 = import(/* webpackChunkName: "components/Component1" */ './components/Component1')
export const Component2 = import(/* webpackChunkName: "components/Component2" */ './components/Component2')

库 > webpack.config.js

entry: path.resolve('src/index.js'),
output: {
    path: path.resolve('build'),
    filename: 'index.js',
    chunkFilename: '[name].js',
    library: 'lib',
    libraryTarget: 'umd'
},

构建结果

80.13 KB  build/index.js
69.68 KB  build/components/Component1.js
12.4 KB   build/components/Component2.js

我想达到的效果：

应用 > index.js

import('lib/components/Component1').then(module => {
    console.log(module) // Empty object so far
})

我应该如何导出组件以便它们一个一个可用？或者有别的办法吗？

Answer 1

最后我通过使用这里定义的配置成功实现了我的意思：https://github.com/webpack/webpack/tree/master/examples/multi-part-library

我不再异步导入组件，而是在 webpack 配置中设置不同的条目。

暴露组件，以便它们可以在应用程序中动态导入

Expose components so that they can be dynamically imported in app

reactjs

webpack

code-splitting