const { ESBuildMinifyPlugin } = require('esbuild-loader') module.exports = { rules: [{ test: /.js$/, // 使用esbuild作为js/ts/jsx/tsx loader loader: 'esbuild-loader', options: { loader: 'jsx', target: 'es2015' } }, ], // 或者使用esbuild-loader作为JS压缩工具 optimization: { ...
从这个例子可以看出，Esbuild 与 SWC 在性能上是在一个量级的，这里通过仓库的例子Esbuild 略快，但不排除其他例子里面 SWC 比 Esbuild 略快的场景。兼容性 Esbuild 本身的限制，包括如下：没有 TS 类型检查不能操作 AST不支持装饰器语法产物 target 无法降级到 ES5 及以下 意味着需要 ES5 产物的场景只用 Es...
下面拿纯 Esbuild 和 SWC 来编译代码,作为 Transformer 来转换 800+ 个 tsx 文件,不写任何的 JS 胶水代码(如 esbuild-register、esbuild-loader、swc-loader 本身为了适配相应的宿主工具,会写一堆 JS 胶水代码,影响判断)。 从这个例子可以看出,Esbuild 与 SWC 在性能上是在一个量级的,这里通过仓库的例子 Es...
{ loader: 'esbuild-import-loader', options: { loader: 'ts', target: 'es2015', libraryName: 'cat-desigin', customName: (name: string) => { return `xxx-desigin/es/${name}/index.js` }, customStyle: (name: string) => { return `xxx-desigin/es/${name}/style/css.js` }, }, ...
+ loader: 'esbuild-loader', + options: { + loader: 'jsx', // Remove this if you're not using JSX + target: 'es2015' // Syntax to compile to (see options below for possible values) + } + }, ... ], }, } 1. 2.
new ReactRefreshWebpackPlugin()], 这两部分，但是使用中发现esbuild-loader 并不支持 react-refresh ...
new ReactRefreshWebpackPlugin()], 这两部分，但是使用中发现esbuild-loader 并不支持 react-refresh ...
cache-loader, and vue-loader, and eslint-loader took 3 mins, 39.75 secs module count = 1894 cache-loader, and thread-loader, and babel-loader, and ts-loader, and eslint-loader took 3 mins, 35.23 secs module count = 482 cache-loader, and ...
产物target 无法降级到 ES5 及以下 意味着需要 ES5 产物的场景只用 Esbuild 无法胜任。 相比之下,SWC 的兼容性更好: 产物支持 ES5 格式 支持装饰器语法 可以通过写 JS 插件操作 AST 应用场景 对于Esbuild 和 SWC,很多时候我们都在对比两者的性能而忽略了应用场景。对于前端的构建工具来说主要有这样几个垂直的功...
esbuild app.jsx --bundle --minify --sourcemap --target=chrome58,firefox57,safari11,edge16 有时,你使用的包可能会引入另一个只能在 node 上运行的包, 例如 node 内置的path包。 当发生这种情况时,你可以通过在package.json中使用browser 字段来将此包替换成对浏览器友好的包,具体如下: ...