Vue 2 Webpack Component Tagger (TypeScript)

A TypeScript-based Webpack loader that automatically adds data attributes to your Vue 2 components for enhanced debugging and component tracking.

Features

✅ TypeScript Support: Full TypeScript implementation with type definitions
✅ Intelligent Tag Recognition: Accurately identifies HTML tags in Vue templates
✅ Auto Attribute Addition: Automatically adds two key attributes to each tag:

• data-soeasy-id: Unique identifier with file path, line, and column information
• data-soeasy-name: Tag type name (e.g., "div", "h1")
  ✅ Vue CLI Integration: Seamlessly integrates with Vue CLI build process
  ✅ Zero Configuration: Works out of the box with sensible defaults

Installation

npm install vue2-webpack-component-tagger
# or
pnpm add vue2-webpack-component-tagger

Usage

With Vue CLI (vue.config.js)

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.module
      .rule('vue-tagger')
      .test(/\.vue$/)
      .use('vue2-tagger-loader')
      .loader('vue2-webpack-component-tagger')
      .options({
        idAttribute: 'data-soeasy-id', // optional, default
        nameAttribute: 'data-soeasy-name', // optional, default
        enableInProduction: false, // optional, default false - 生产环境默认不启用
      })
      .before('vue-loader')
  },
})

With Custom Webpack Configuration

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue2-webpack-component-tagger',
            options: {
              idAttribute: 'data-soeasy-id',
              nameAttribute: 'data-soeasy-name',
              enableInProduction: false, // 生产环境默认不启用
            },
          },
        ],
        enforce: 'pre',
      },
    ],
  },
}

Environment Detection

该插件会自动检测以下环境变量来判断是否为生产环境：

• NODE_ENV=production
• VUE_APP_ENV=production
• BUILD_ENV=production

在生产环境下，插件默认不会添加调试属性，除非显式设置 enableInProduction: true。

仅在开发/测试环境启用（推荐）

// vue.config.js
module.exports = defineConfig({
  chainWebpack: (config) => {
    // 仅在非生产环境添加此 loader
    if (process.env.NODE_ENV !== 'production') {
      config.module
        .rule('vue-tagger')
        .test(/\.vue$/)
        .use('vue2-tagger-loader')
        .loader('vue2-webpack-component-tagger')
        .before('vue-loader')
    }
  },
})

Example Output

Before:

<template>
  <div id="app">
    <h1>Vue 2 Test</h1>
  </div>
</template>

After:

<template>
  <div
    data-soeasy-id="/path/to/Component.vue:2:3"
    data-soeasy-name="div"
    id="app">
    <h1 data-soeasy-id="/path/to/Component.vue:3:5" data-soeasy-name="h1">
      Vue 2 Test
    </h1>
  </div>
</template>

Configuration Options

| Option | Type | Default | Description | | -------------------- | --------- | -------------------- | ---------------------------------------------------------- | | idAttribute | string | 'data-soeasy-id' | Name of the ID attribute containing file path and position | | nameAttribute | string | 'data-soeasy-name' | Name of the attribute containing tag name | | enableInProduction | boolean | false | Whether to enable the loader in production environment |

TypeScript Support

This package includes full TypeScript support with:

• Type definitions (.d.ts files)
• Source maps for debugging
• Strict type checking

interface LoaderOptions {
  idAttribute?: string
  nameAttribute?: string
  enableInProduction?: boolean
}

Development

Building from Source

# Install dependencies
pnpm install

# Production build (no source maps)
pnpm run build

# Development build (with source maps)
pnpm run build:dev

# Watch mode for development (with source maps)
pnpm run dev

# Clean build artifacts
pnpm run clean

Package Contents

The published npm package includes only essential files:

• dist/index.js - Compiled JavaScript
• dist/index.d.ts - TypeScript type definitions
• src/index.ts - Original TypeScript source
• README.md - Documentation
• package.json - Package metadata

Note: Source maps (.map files) are excluded from the published package to keep it lightweight, but are generated during development builds.

Project Structure

├── src/
│   ├── index.ts          # TypeScript source
│   └── index.js          # JavaScript version (legacy)
├── dist/                 # Compiled output
│   ├── index.js          # Compiled JavaScript
│   ├── index.d.ts        # Type definitions
│   └── *.map             # Source maps
├── tsconfig.json         # TypeScript configuration
└── package.json

Use Cases

• 🎯 Component Debugging: Quickly locate component source code
• 🔍 Element Tracking: Identify elements in developer tools
• 📊 Performance Analysis: Provide precise component identification
• 🚧 Development Tools: Enable advanced debugging features

Compatibility

• ✅ Vue 2.6+
• ✅ Webpack 4+ or 5+
• ✅ Vue CLI 3/4/5
• ✅ Node.js 14+
• ✅ TypeScript 4.0+

Dependencies

• vue-template-compiler: Vue 2 template compiler (peer dependency)
• magic-string: String manipulation utility
• webpack: Build tool (peer dependency)

License

Apache-2.0

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.