https://github.com/zheeeng/vite-plugin-plain-text
A Vite plugin transforms the rule-matched file as plain text.
https://github.com/zheeeng/vite-plugin-plain-text
plaintext plugin vite vite-plugin vite-plugin-plain-text vitejs
Last synced: about 1 month ago
JSON representation
A Vite plugin transforms the rule-matched file as plain text.
- Host: GitHub
- URL: https://github.com/zheeeng/vite-plugin-plain-text
- Owner: zheeeng
- License: mit
- Created: 2021-05-31T15:07:17.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-02-02T03:26:44.000Z (about 3 years ago)
- Last Synced: 2025-03-11T13:41:28.763Z (about 1 year ago)
- Topics: plaintext, plugin, vite, vite-plugin, vite-plugin-plain-text, vitejs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vite-plugin-plain-text
- Size: 52.7 KB
- Stars: 24
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-plugin-plain-text
[](https://nodei.co/npm/vite-plugin-plain-text/)
[](https://www.npmjs.com/package/vite-plugin-plain-text)
A Vite plugin that transforms matched files into plain text.
## Installation
```bash
pnpm i -D vite-plugin-plain-text (or npm/yarn)
```
## Usage Example
Assume we are going to transform these files:
1. The project's `LICENSE` file
2. Textbox
3. `.glsl` file
into plain text.
```ts
// vite.config.(t|j)s
import { defineConfig } from 'vite';
import plainText from 'vite-plugin-plain-text';
export default defineConfig({
plugins: [
// passing regular expression or glob matcher
plainText([/\/LICENSE$/, '**/*.text', /\.glsl$/]),
],
});
```
```js component.js
// component.js
import { plainText as LICENSE } from '../LICENSE'
import { plainText as Lorem } from '../lorem-ipsum.text'
import { plainText as Siren } from '../siren.glsl'
console.log(LICENSE)
console.log(Lorem)
console.log(Siren)
```
## Advanced Usage
### Options Reference
```ts
type PlainTextOptions = {
namedExport?: string | false,
dtsAutoGen?: boolean,
distAutoClean?: boolean,
}
```
### Enable Default Export
Use the `plainTextOptions.namedExport` option to configure the named exported variable. To enable the default export, pass `false`, `''`, or `undefined`.
```ts
// vite.config.(t|j)s
import { defineConfig } from 'vite';
import plainText from 'vite-plugin-plain-text';
export default defineConfig({
plugins: [
plainText(
[/\/LICENSE$/, '**/*.text', /\.glsl$/],
{ namedExport: false },
),
],
});
```
```js component.js
// component.js
import LICENSE from '../LICENSE'
import Lorem from '../lorem-ipsum.text'
import Siren from '../siren.glsl'
console.log(LICENSE)
console.log(Lorem)
console.log(Siren)
```
### Type Safety
#### Adding Module Declarations Manually
```ts
// vite-env.d.ts
declare module '*/LICENSE' {
export const plainText: string
}
declare module '*.text' {
export const plainText: string
}
declare module '*.glsl' {
export const plainText: string
}
```
#### Generate the declaration automatically
1. `plainTextOptions.dtsAutoGen` generates `.dts` files for matched files.
2. `plainTextOptions.dtsAutoClean` cleans up these `.dts` files after the vite plugin starts up each time.
```ts
import { defineConfig } from 'vite';
import plainText from 'vite-plugin-plain-text';
export default defineConfig({
plugins: [
plainText(
[/\/LICENSE$/, '**/*.text', /\.glsl$/],
{ namedExport: false, dtsAutoGen: true, distAutoClean: true },
),
],
});
```
## License
MIT
## Alternative
Virtual asset Loader: [vite-plugin-virtual-plain-text](https://www.npmjs.com/package/vite-plugin-virtual-plain-text)