babel-plugin-rax2react

支持转换 rax 代码为 react 代码。

How To Use

添加此插件到 bebel 配置中

module.exports = function(api) {
  api.cache(false);
  const presets = [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "false",
        corejs: 3,
        modules: false,
        debug: false,
      },
    ],
    "@babel/preset-react",
  ];
  const plugins = [
    require.resolve('babel-plugin-rax-to-react'),
    require.resolve("@babel/plugin-proposal-export-default-from"),

    // Stage 2
    [require.resolve("@babel/plugin-proposal-decorators"), { legacy: true }],
    require.resolve("@babel/plugin-proposal-function-sent"),
    require.resolve("@babel/plugin-proposal-export-namespace-from"),
    require.resolve("@babel/plugin-proposal-numeric-separator"),
    require.resolve("@babel/plugin-proposal-throw-expressions"),

    // // Stage 3
    require.resolve("@babel/plugin-syntax-dynamic-import"),
    require.resolve("@babel/plugin-syntax-import-meta"),
    [
      require.resolve("@babel/plugin-proposal-class-properties"),
      { loose: true },
    ],
    require.resolve("@babel/plugin-proposal-json-strings"),
    require.resolve("@babel/plugin-proposal-object-rest-spread"),
  ];

  return {
    presets,
    plugins,
  };
};

如果模块中使用了外部 css 文件来做样式布局，那么需要结合 webpack 以及 css-loader ，参考 css-loader 配置:

{
  loader: require.resolve('css-loader'),
  options: {
    importLoaders: 2,
    modules: {
      mode: 'local',
      localIdentName: '[path][name]__[local]--[hash:base64:5]',
    },
    // sourceMap: !!DEV,
  },
}