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