如何在使用webpack/esbuild-loader后运行Babel插件？

Question

我在我们的Webpack React项目中将babel-loader换成esbuild-loader后，将HMR构建时间缩短了约10倍。问题是：我还没有弄清楚如何替换babel-plugin-styled-components，即如何将styled-components名称作为类名添加到dom元素中以获得更好的开发体验。

是否可能使用esbuild构建，然后以某种方式运行所提到的Babel插件呢？

提前致谢！

- keijop

Answer 1

我这样解决了问题：在 Webpack 配置文件中，先使用 esbuild 转译 *.js 文件（JavaScript/React），然后通过 babel-loader 运行转译后的 JavaScript，以调用我想要使用的插件。
这种解决方案略微增加了构建时间，但仍比使用 Babel 转译所有内容快近 10 倍。

{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'esbuild-loader',
  options: {
    loader: 'jsx',
    target: 'es2015',
  },
},
{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
  options: {
    plugins: ['babel-plugin-styled-components'],
  },
 }

- keijop