当vue2中写了jsx,如何使用esbuild-loader进行打包?

1,265 阅读1分钟

最近在vue2.7.x的项目中使用了esbuild-loader进行开发提速,如何在webpack中使用 esbuild-loader,可以参考以下文章。 浅谈esbuild-loader的原理

但是,如果vue2.7.x中写了jsx代码,那么以上配置就会出问题,需要用以下方法来解决。

注意vue版本需要为2.7.x。

首先 安装包 vue2-jsx-esbuild

npm i vue2-jsx-esbuild -D

然后在webpack的rules中改写以下:

...
module: {
  rules: [
      {
          test: /\.js$/,
          use: {
              loader: 'esbuild-loader',
              options: {
                  loader: 'jsx',
                  jsxFactory: 'vue2JsxEsbuild',
                  target: 'es2015'
              },
          }
      }
  ]
}
...

在webapck的plugins中添加如下代码

plugins: [
  new webpack.ProvidePlugin({
      vue2JsxEsbuild: ["vue2-jsx-esbuild", "default"]
  })
]