针对内部使用@import引入第三方库的less文件, less.render编译失败问题

背景

最近在弄一个基于 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 样式文件