我可以让 Vite 使用“dropLabels”选项排除某些代码行吗？

Question

我正在使用 Vite 捆绑我的 Vue.js 应用程序，我注意到 esbuild 有一个有趣的选项，名为“Drop Labels”，它提供了一种从生产包中排除调试代码的简单方法。

这是一个例子：

DEV: console.log('This should only show in development.');

这是我在

vite.config.js

中尝试过的：

export default defineConfig({
  ...
  esbuild: {
    dropLabels: ['DEV'],
  }
})

此选项似乎正在处理（因为如果我指定字符串而不是数组，则会收到错误），但

console.log

仍然出现在捆绑包中。

有趣的是，当我启用

drop

选项时，如下所示：

esbuild: {
  drop: ['console'],
  dropLabels: ['DEV'],
}

...

console.log

最终消失了，但是如果我不想删除 所有

console.log

，而只想删除特定的，该怎么办？

是否可能是

DEV:

标签在到达 esbuild 之前被其他优化器删除了？

为了重现这一点，这里有一个简单的 StackBlitz 来演示它：
https://stackblitz.com/edit/vitejs-vite-4uczvd?file=src%2Fmain.js,vite.config.js&terminal=dev

（开发服务器将默认运行，您可以通过打开浏览器开发工具来查看

console.log

。要运行生产版本，请使用 Q、ENTER 退出开发服务器，然后输入

npm run build && cat dist/assets/index*.js 

您将看到生产包 JS 输出。）

Answer 1

esbuild 默认情况下仅适用于 ts、tsx、jsx 文件。通过将文件名从

main.js

重命名为

main.ts

，

DEV

标签生效。