使用twin.macro开发的npm组件包安装后报babel-plugin-macros错误

方案1：组件库预编译阶段处理所有twin.macro调用（推荐） #

该方案对引入组件库的项目无额外配置要求，适配性最高：

• 调整你的组件库打包配置，在本地编译环节完成twin.macro的语法转换，不要将包含macro调用的未编译源码直接发布到npm
• 若使用Rollup作为打包工具，安装@rollup/plugin-babel，配置babel处理组件源码时启用babel-plugin-macros，确保打包后的产物不存在import 'twin.macro'语句、以及twin/css等macro方法的调用代码
• 打包完成后校验dist目录下的产物内容，确认所有twin相关的语法都已被转换为普通className或css-in-js运行时代码，无任何macro相关残留引用

方案2：调整使用侧项目的babel配置 #

如果不需要兼容通用使用场景，可要求引入组件库的项目做如下配置：

• 修改项目的babel编译范围，不要全量排除node_modules目录，需要将你的组件包加入babel的编译名单，参考webpack babel-loader配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jsx?|tsx?)$/,
        exclude: /node_modules(?!\/<你的组件包名>)/,
        use: ['babel-loader']
      }
    ]
  }
}

• 确认使用侧项目的babel配置已正确启用babel-plugin-macros，且twin.macro的配置和你开发组件库时的配置完全一致，避免出现样式偏差

通用校验项 #

• 检查组件库的package.json配置，将babel-plugin-macros、twin.macro从dependencies移动到devDependencies，避免用户安装时拉取不必要的依赖
• 组件库开发阶段不要将twin.macro相关的方法作为运行时内容导出，所有macro调用都必须在编译阶段处理完成

内容的提问来源于stack exchange，提问作者David Acevedo