fix: resolve .less import issue in ES build (#2844)#2845
fix: resolve .less import issue in ES build (#2844)#2845
Conversation
- Change babel transformer to esbuild in .fatherrc.ts - esbuild can properly handle CSS/LESS imports and inline them - This fixes the issue where consumers need to install 'less' preprocessor - Fixes issue #2844
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the build configuration in packages/component/.fatherrc.ts by switching the transformer from babel to esbuild for both ESM and CJS outputs. However, feedback indicates that esbuild in non-bundle mode will fail to inline CSS/LESS imports as intended and will bypass existing Babel plugins. It is also recommended to set the CJS platform to browser to maintain consistency for this browser-oriented component library.
| transformer: 'esbuild', | ||
| platform: 'browser', | ||
| }, | ||
| cjs: isProduction | ||
| ? { | ||
| transformer: 'esbuild', |
There was a problem hiding this comment.
PR 描述中提到切换到 esbuild transformer 可以将 .less 导入转换为内联 CSS。但在 father 的非 bundle 模式（即 esm 和 cjs 配置）下，esbuild 是逐文件进行转换的，它并不会解析或内联被导入的 CSS/LESS 文件。这意味着构建产物（如 es/index.js）中很可能依然保留着 import "./css/index.less"，无法解决 issue #2844。原本使用的 babel transformer 配合注释中提到的 transform-import-css-l7 插件正是为了处理此类需求，切换到 esbuild 会导致这些 Babel 插件失效。
| cjs: isProduction | ||
| ? { | ||
| transformer: 'esbuild', | ||
| platform: 'node', |
There was a problem hiding this comment.
对于 @antv/l7-component 这种纯浏览器端的组件库，建议将 cjs 的 platform 也设置为 browser。虽然 cjs 产物常用于 Node 环境（如 SSR 或测试），但统一设置为 browser 可以确保 esbuild 在转换时采用一致的浏览器端默认行为，避免潜在的环境差异问题。
| platform: 'node', | |
| platform: 'browser', |
1 participant
修复描述
修复 issue #2844：@antv/l7-component ES build 导入 .less 源文件的问题。
问题
从 v2.24.0 开始，
@antv/l7-component/es/index.js导入了.less文件：这导致任何通过 Vite 或其他 bundler 构建的项目，如果没有安装
less作为依赖，都会出现构建失败。解决方案
将
.fatherrc.ts中的 babel transformer 改为 esbuild。esbuild 可以正确地将 .less 导入转换为内联 CSS，而不需要消费者安装 less 预处理器。修改文件
packages/component/.fatherrc.ts：将 esm 和 cjs 的 transformer 从 babel 改为 esbuild测试
此修复需要在发布新版本后进行验证，确保 ES build 输出不再包含对 .less 文件的直接引用。
相关 Issue: #2844