React项目迁移至RsPack后，如何配置Twin.macro？

要让Twin.macro在RsPack项目中正常运行，需将原有的Babel配置迁移到RsPack的构建规则中，具体操作如下：

1. 确认依赖已安装 #

确保项目中已安装原Babel配置涉及的所有依赖包：

npm install @babel/preset-env @babel/preset-react @emotion/babel-preset-css-prop @babel/preset-typescript babel-plugin-twin babel-plugin-macros @babel/plugin-transform-runtime @babel/runtime --save-dev

2. 在RsPack配置文件中添加Babel规则 #

修改rspack.config.js，为JS/JSX/TS/TSX文件配置babel-loader，并将原.babelrc中的配置迁移到loader选项内：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              ['@babel/preset-react', { runtime: 'automatic' }],
              '@emotion/babel-preset-css-prop',
              '@babel/preset-typescript',
            ],
            plugins: [
              'babel-plugin-twin',
              'babel-plugin-macros',
              '@babel/plugin-transform-runtime',
            ],
          },
        },
      },
      // 按需添加其他规则，比如基础CSS处理
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

3. 配置Twin.macro的预设 #

在package.json中添加babelMacros配置，指定Twin使用Emotion预设：

{
  "babelMacros": {
    "twin": {
      "preset": "emotion"
    }
  }
}

完成以上配置后，重启RsPack构建即可让Twin.macro正常工作。

内容的提问来源于stack exchange，提问作者Vishal Nair