unplugin-comment-mock

中文文档

Features

• Mock data through comments during local development without affecting production code.

  // #comment-mock 2 
  const foo = 1;  // Will be replaced with 2

• Automatically traverse upwards to locate mock files by convention.

Installation

npm i unplugin-comment-mock

Usage

Vite

// vite.config.ts
import commentMock from 'unplugin-comment-mock/vite'

export default defineConfig(({ command }) => {
  const isDev = command === "serve";
  return {
    plugins: [
      isDev ? commentMock({ /* options */ }) : null
    ].filter(Boolean),
  }
})

Example: playground/

Rspack

// rspack.config.ts
import commentMock from 'unplugin-comment-mock/rspack'

const isDev = process.env.NODE_ENV === "development"
export default defineConfig({
  plugins: [
    isDev ? commentMock({ /* options */ }) : null,
  ].filter(Boolean),
})

Rollup

// rollup.config.js
import commentMock from 'unplugin-comment-mock/rollup'

export default {
  plugins: [
    commentMock({ /* options */ }),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-comment-mock/webpack')({ /* options */ })
  ]
}

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-comment-mock/webpack')({ /* options */ }),
    ],
  },
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import Starter from 'unplugin-comment-mock/esbuild'

build({
  plugins: [Starter()],
})

Configuration

commentMock(/* options */)

• mockFileName: Name of the mock data file.
  • Type: string | string[]
  • Default: ["mock", "mock"]
• mockFileExt: File extensions for mock data files.
  • Type: string | string[]
  • Default: [".js", ".ts"]

Rules

• Only single-line comments starting with #comment-mock take effect.
• Reserved variables __origin or __o represent the original value.
• Follow the mock file naming convention - no manual importing required; auto-detected upwards.

Examples

More Example

• Primitive values are directly replaced

/* Before compilation */
// #comment-mock 2
const foo = 1;
// #comment-mock Symbol('d')
let bar = 2;
// #comment-mock
bar = 3;

/* After compilation */
const foo = 2;
let bar = Symbol('d');
bar = 3; // Original value remains as no mock value provided

• Reference types automatically import mock files

/* Before compilation */
// #comment-mock mockFoo(1)
const foo = 1;
// #comment-mock mockBar(__o)
const bar = 2;

/* After compilation */
import { mockFoo, mockBar } from './__mock__.ts'
const foo = mockFoo(1);
const bar = mockBar(2); // __o replaced with original value 2

Utility Functions

Import

import { ** } from 'unplugin-comment-mock/utils'

populateArray(...inventory)

type KeyFn<T> = (partialTarget: T, index: number) => boolean
type InventoryKey<T> = number | RegExp | KeyFn<T>
type InventoryKey<T> = number | RegExp | KeyFn<T>

function populateArray<T = Record<string, any>>(
    ...inventory: Record<string | symbol, any> | [InventoryKey<T>, InventoryValue<T>][],
): T[]

• Constructs object arrays using indices, regex, or functions. Merges objects when array elements are plain objects; otherwise overwrites elements.
• inventory accepts objects or arrays. Objects are treated as properties; arrays as key-value pairs for construction.
  • For array elements: Keys support numbers, regex, or functions. Values support functions or direct array elements.

More Example

/**
 * [{ foo: 1, index: 0 }, { index: 1 }, null, { bar: 3, index: 3 }]
 */
populateArray(
  {
    length: 4,
  },
  [0, { foo: 1 }],
  [(_prevValue, i) => i === 3, { bar: 3 }],
  [
    /.*/,
    (_prevValue, index) => index === 2 ? null : ({
      index,
    })
  ],
)