Vue CLI 项目使用 esbuild-loader 替代 babel-loader

[cklwblove]

1. 安装 esbuild-loader

yarn add esbuild-loader --dev

2. vue.config.js 在 chainWebpack 里添加

   
   // 移除已有的使用 `babel-loader` 的规则
   config.module.rule("js").uses.clear();
   config.module.rule("ts").uses.clear();
   config.module.rule("tsx").uses.clear();

// 注入使用 esbuild-loader 的新规则 config.module.rule("js") .test(/.m?jsx?$/) .use("esbuild-loader") .loader("esbuild-loader") .options({ // 只适用于 vue3 , vue2 没有暴露 h jsxFactory: "h", jsxFragment: "Fragment", // vue 2 // jsx: "automatic", // 安装 @lancercomet/vue2-jsx-runtime https://github.com/LancerComet/vue2-jsx-runtime // jsxImportSource: "@lancercomet/vue2-jsx-runtime" loader: "jsx", target: "es2015" }) .end(); config.module.rule("ts") .test(/.ts$/) .use("esbuild-loader") .loader("esbuild-loader") .options({ loader: "ts", target: "es2015" }) .end(); config.module.rule("tsx") .test(/.tsx$/) .use("esbuild-loader") .loader("esbuild-loader") .options({ loader: "tsx", target: "es2015" }) .end();

## 替换后会出现的问题

1. 项目中有使用到 Web Worker，出现 TypeError: Failed to construct 'URL': Invalid URL 错误。采用 Babel 则正常工作。
2. 不支持 IE11