feat: 如何使用 ESM-only 的 webpack plugin？

StephenPCG commented 2 months ago

What problem does this feature solve?

我使用 father 打包前端代码，输出为 umd，因此用 webpack 打包。项目使用了 unocss，之前使用都正常，功能满足预期。

unocss 的 webpack 插件（@unocss/webpack）从 v0.59.0 开始改为 ESM-only，在 .fatherrc.ts 中无法使用（或者我不知道如何使用）。

我尝试过以下写法：

export default defineConfig({
  umd: {
    chainWebpack: (memo, args) => {
      import("@unocss/webpack").then(({default: UnoCSS}) => {
        memo.plugin('unocss').use(UnoCSS('./uno.config.ts'))
      })
    }
  }
})

但是并不 work，会报这样的错：TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified.

请问现在的 father 是否支持 ESM-only 的 webpack 插件？如果支持，该如何配置？如果不支持，是否有计划添加支持？

Possible Solution (optional)

No response

PeachScript commented 5 days ago

chainWebpack 支持 async function，我理解里面 await import 一下即可

Jinbao1001 commented 5 days ago

chainWebpack 支持 async function，我理解里面 await import 一下即可

这个报错的原因猜测是 esbuild cjs 编译不支持 dynamic import

Jinbao1001 commented 5 days ago

可以考虑使用低版本, 因为我不太清楚, webpack插件做 esm-only 有什么必要性, 这在复杂依赖 + 高定制化的项目中显然会带来很多问题.

father 这边的报错应该是 esbuild 动态编译配置文件 -> cjs带来的. 应该可以确认这是esbuild的一个已知问题: issue

目前考虑的解决方案:

考虑使用 top level await 直接在顶层导入, 但是由于 config文件 会被 umi 侧使用 esbuild 动态编译, esbuild 当下的target 配置 es2019 并不支持此特性, 而且编译不能排除 node_modules, 不知改动会不会引发其他历史风险问题? 也不清楚 esbuild 会不会对 esm TLA 做适配cjs的转换?
考虑配置社区 dynamic-import 插件 ?
升级 esbuild? 好像对于cjs dynamic import 有专门的pr修复, 但这个影响比较大, 因为目前 esbuild 版本升级带来不少问题, 已经在 umi 与 father都锁死版本.

很抱歉由于影响面比较多, 且暂时没有其它的项目受到影响, 目前暂无排期计划去支持 esm-only 在配置文件中的使用. 如果你有时间欢迎讨论与 PR.

umijs / father

feat: 如何使用 ESM-only 的 webpack plugin？ #780

What problem does this feature solve?

Possible Solution (optional)