开始使用

Why this exists?

Sometimes, we need to get the name of the classes we get from import.meta.glob, but after the code is compiled and minified, the names of the classes will be minified to less characters.

The plugin adds a static property to all classes with the original name, so that we can get the original name of the class in the compiled code.

Installation

npm i -D unplugin-original-class-name
# or use pnpm
pnpm i -D @graphifif/unplugin-original-class-name

vite.config.ts

import OriginalClassName from "unplugin-original-class-name/vite";

export default defineConfig({
  plugins: [
    OriginalClassName({
      /* options */
    }),
  ],
});

rollup.config.js

import OriginalClassName from "unplugin-original-class-name/rollup";

export default {
  plugins: [
    OriginalClassName({
      /* options */
    }),
    // other plugins
  ],
};

webpack.config.js

module.exports = {
  /* ... */
  plugins: [
    require("unplugin-original-class-name/webpack").default({
      /* options */
    }),
  ],
};

rspack.config.js

module.exports = {
  /* ... */
  plugins: [
    require("unplugin-original-class-name/rspack").default({
      /* options */
    }),
  ],
};

nuxt.config.js

export default defineNuxtConfig({
  modules: [
    [
      "unplugin-original-class-name/nuxt",
      {
        /* options */
      },
    ],
  ],
});

vue.config.js

module.exports = {
  /* ... */
  plugins: [
    require("unplugin-original-class-name/webpack").default({
      /* options */
    }),
  ],
};

You can also rename the Vue configuration file to vue.config.mjs and use static import syntax (you should use latest @vue/cli-service ^5.0.8):

vue.config.mjs

import OriginalClassName from "unplugin-original-class-name/webpack";

export default {
  configureWebpack: {
    plugins: [
      OriginalClassName({
        /* options */
      }),
    ],
  },
};

Vite:

vite.config.js

import OriginalClassName from "unplugin-original-class-name/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    OriginalClassName({
      /* options */
    }),
  ],
});

Webpack:

quasar.conf.js

const OriginalClassNamePlugin = require("unplugin-original-class-name/webpack").default;

module.exports = {
  build: {
    chainWebpack(chain) {
      chain.plugin("unplugin-original-class-name").use(
        OriginalClassNamePlugin({
          /* options */
        }),
      );
    },
  },
};

esbuild.config.js

import { build } from "esbuild";
import OriginalClassName from "unplugin-original-class-name/esbuild";

build({
  /* ... */
  plugins: [
    OriginalClassName({
      /* options */
    }),
  ],
});

astro.config.mjs

import OriginalClassName from "unplugin-original-class-name/astro";

export default defineConfig({
  integrations: [
    OriginalClassName({
      /* options */
    }),
  ],
});

Configuration

The only config is staticMethodName: string

TypeScript support

tsconfig.json

{
  "compilerOptions": {
    // ...
    "types": ["@graphif/unplugin-original-class/client"]
  }
  // ...
}

Or use a declaration comment:

vite-env.d.ts

/// <reference types="@graphif/unplugin-original-class/client" />

开始使用

Why this exists?

Installation

Configuration

TypeScript support

On this page