使用vite构建时如何从js文件中删除调试代码

Question

我正在尝试为 vue3 中内置的库添加 js 调试代码，并且我希望在使用单独的

vite.config.js

文件构建生产时自动删除它。

调试代码可以夹在特定的注释行中，如下所示：

/* ------------test---------- */
console.log("this is a testing test");
/* ------------test---------- */

有没有办法在 vite 配置中做到这一点，或者需要哪些特殊插件或我需要在编译之前手动打开文件并使用节点脚本删除这些代码片段

Answer 1

测试文件通常写入单独的文件/文件夹中。大多数测试框架都遵循

FILENAME.test.js

约定。然后，捆绑程序可以轻松排除这些文件。

如果您对源码内测试感兴趣，Vite 开发者构建的单元测试框架 Vitest 支持源码内测试。

要使用该功能，请将测试包装在

if

语句中，以检查

import.meta.vitest

是否已定义：

function double(n) {
  return n * 2;
}

if (import.meta.vitest) {
  const { test, expect } = import.meta.vitest;

  test("double", () => {
    expect(double(0)).toEqual(0);
    expect(double(1)).toEqual(2);
  });
}

您还需要更新您的 vite/vtest 配置 (vite.config.ts) 以包含以下文件：

// vite.config.ts
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    includeSource: ["src/**/*.{js,ts}"],
  },

  // set import.meta.vitest to undefined in production build
  define: {
    "import.meta.vitest": "undefined",
  },
});

Answer 2

这个 vite-plugin-remove-blocks 可能是一个选项。它允许在构建阶段从任何类型的代码中删除标记的块。

该插件最近发布，欢迎任何反馈。