前因:
1. 我在项目中使用了 babel-plugin-import 插件
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }, 'antd']
2. 原本想通过如下方式导出组件,但是build后样式文件没有被打包 https://github.com/ant-design/babel-plugin-import/issues/569
export { Button, Row } from 'antd';
3. 因此我尝试先 import 进来组件,再 export 出去(注意:为了方便其他人使用 不能 export default { Button})
import { Button, Row } from 'antd';
export { Button, Row };
// export default { Button, Row }; 不希望 export default
4. 结果 webpack 报错 https://github.com/ant-design/babel-plugin-import/issues/331
ERROR in ./modules/library/antd/index.tsx 1:9
Module parse failed: Export 'Button' is not defined (1:9)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> export { Button, Row };
@ container entry ./antd[0]
webpack 5.28.0 compiled with 1 error in 4966 ms
问题:
1. 主要是希望使用这个模块使用者可以通过 import {Button} from 'my-module' 来加载组件
2. 因为各种原因,不希望直接引用 antd 的组件,一定要中转一次,还得是按需的
3. 如果能帮助我解决 export { Button, Row } from 'antd'; build 后没有样式的问题那就更好了
4. 请求帮助提供一个可以 import 进来组件,再 export {} 出去的方案,十分感谢
补充:已经找到个方法,但是写起来很繁琐,希望有其他方案
补充: 不是要解决 antd 按需加载(按需加载早就实现了)
补充: 不直接使用 antd 的原因,是因为我在做一个 module Federation 模块联邦的项目,我想减少 antd 打包的体积(按需),但是 模块联邦 shared 的模块是全量的不可按需的,因此我打算实现一个 ”库应用“,这个 ”库应用“ 专门做 antd 的打包,其他应用使用到的 antd 组件都从这个库应用远程引用,在打包这个库应用是发现 我只是 export {组件} from 'antd', 这种方式会导致 样式文件没有被打包进来(https://github.com/ant-design/babel-plugin-import/issues/569 ),因此有了上述的问题
import { Button as _Button, Row as _Row } from 'antd';
export const Button = _Button;
export const Row = _Row;