antd 是如何制作按需加载组件的？

Question

antd 的源码都被封装了，不易阅读，哪位大佬能说明下antd 是如何制作按需加载组件的？我自己制作了一个组件包上传到 npm 安装之后报错，希望通过了解 antd 的制作按需加载组件得到一点思路，谢谢

Answer 1

babel-plugin-import
https://www.npmjs.com/package...

---

上面那个网址里有说原理是把

import { Button } from 'antd';

这种引用语句编译成下面这种（使用{ "libraryName": "antd", style: "css" } options）

var _button = require('antd/lib/button');
require('antd/lib/button/style/css');

至于你自己写的库报错，是因为其他原因

---

https://unpkg.com/browse/antd...
你看一下antd的lib下面的文件，已经是经过jsx编译的了（所以不会因为不认jsx模板报错）
而antd的github项目是没有lib文件夹的
https://github.com/ant-design...
说明lib是编译生成的
根据package.json中的命令，antd是自己专门写了个https://github.com/ant-design...
你要是也想搞个自动打包恐怕得自己写一个
像babel-plugin-import支持的lodash也是自己写了个编译脚本，你可以参考一下
https://github.com/lodash/lodash