0

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

Awbeci 1.9k
2019-08-08 提问
1 个回答
0

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

撰写答案

推广链接