在Taro项目中解决UnoCSS的ESM兼容性问题

问题背景

UnoCSS作为一款流行的原子化CSS引擎，在Taro框架中使用时可能会遇到ESM模块兼容性问题。当开发者尝试在Taro项目中使用UnoCSS 0.59.3版本时，控制台会抛出"SyntaxError: Cannot use import statement outside a module"错误，这表明Node.js环境无法正确解析ES模块语法。

问题分析

这个问题的根源在于Taro框架的Webpack配置默认不支持直接导入ES模块格式的包。UnoCSS从0.59.3版本开始，其核心配置包(@unocss/config)采用了纯ESM格式分发，不再提供CommonJS格式的构建产物。而Taro的构建系统在处理这类纯ESM包时会出现兼容性问题。

解决方案

方案一：使用动态导入

可以尝试使用动态导入方式加载UnoCSS插件：

// config/index.js
export default defineConfig({
  mini: {
    webpackChain: async (chain) => {
      const UnoCSS = await import('unocss/webpack')
      chain.plugin('unocss').use(UnoCSS.default())
    }
  }
})

方案二：降级UnoCSS版本

如果动态导入方案不适用，可以暂时降级到0.58.x版本，该版本仍提供CommonJS格式的构建产物：

npm install unocss@0.58.0

方案三：修改Taro配置

在Taro项目的config/index.js中添加以下配置，强制Webpack正确处理ES模块：

// config/index.js
export default {
  // ...其他配置
  compiler: {
    type: 'webpack5',
    prebundle: {
      enable: true,
      force: true
    }
  }
}

最佳实践建议

1. 版本选择：在Taro官方完全支持ESM前，建议锁定UnoCSS版本为0.58.x
2. 构建优化：考虑将UnoCSS相关配置提取到单独文件中，便于维护和更新
3. 监控更新：关注Taro和UnoCSS的版本更新日志，及时获取兼容性改进信息

总结

Taro框架与纯ESM格式包的兼容性问题在社区中较为常见。通过合理的配置和版本管理，开发者可以在享受UnoCSS强大功能的同时，避免构建时的模块解析问题。随着前端生态的不断发展，这类兼容性问题将逐步得到根本解决。