背景
最近在弄一个基于 antd 的业务组件库,由于要实现 esmodule 的 tree-shaking 功能,而这个功能代码的实现没有依赖于第三方构建工具,完全是自己使用node + babel 等手动code的,期间遇到了一些问题,特意记录一下,一是自己以后能够进行回顾,避免遗忘;二是和其他开发同学进行交流沟通。
代码展示
首先咱们贴一下具体的代码展示
这是less.render方法将less 转成 css
less.render(
fs.readFileSync(filePath).toString(),
{
compress: true,
},
// eslint-disable-next-line func-names
function (e, output) {
fs.removeSync(filePath)
fs.outputFileSync(filePath.replace(lessRegExp, '.css'), output.css)
}
)
而我的less文件中使用了antd的第三方less库
@import '~antd/dist/antd.less';
原因 & 解决方案
当使用less.render进行转化的时候,它没法找到 '~' 这个特殊字符所代表的路径,像一些webpack、rollup、glup等打包工具内部是支持的。
所以需要将 `~` 符号去掉,其次由于less.render方法没法对内部@import的less语法进行转换,所以我们直接引入antd的css库。
我们改用下面这种引入方式:
@import 'antd/dist/antd.css';
缺陷之处
试了一下没有问题,但是后来发现由于 @import 'antd/dist/antd.css'; 这种使用的相对路径,在用户项目使用的webpack等构建工具下打包是没有问题的。因为webpack发现所有业务模块没有找不到此路径时,就会去node_modules里面找。
而当用户自己手动打包时,还是会报路径找不到的错误。
思考
由于该组件库本身是基于 antd 再次封装,所以我仔细想了想,既然都用了 antd ,那就需要用户在使用的项目中引入全局的 antd 样式文件,有两方面原因:1. antd的样式体积较大,引入会导致组件库体积变大 2. antd 本身也是这样做的,如果用户项目引入 antd 样式文件,那此时文件就重复了。
结论
基于上面的个人思考,所以组件库中没有必要引入 antd 样式文件