Vite-plugin-public-typescript NPM

vite-plugin-public-typescript

English | 中文

A vite plugin inject typescript script into html

Compile typescript files in the specified directory then inject them into html

Online Demo

Demo

Why

If you want to execute some scripts before the page render
If you don't want to inject script code into index.html in a hard-coded way
If you want third-party scripts to have hash cache
If you want your project to be all typescript
...

vite-plugin-public-typescript is born to solve these problems elegantly

Install

pnpm add vite-plugin-public-typescript -D

Scenes

Independent third-party scripts, such as sentry, google analytics, baidu statistics, etc.
Scripts that you want to execute before the page is fully loaded, such as lib-flexible, etc.
Initialize global functions
...

Features

Output js files with hash, no need to worry about cache
Default esbuild compilation, blazo fast!
Support babel compilation, no need to worry about browser compatibility
Support vite environment variables
Support vite HMR
Support different output modes (memory mode and file mode)
Support CSR and SSR

Options

Option	Type	Default	Description
`inputDir`	`string`	`public-typescript`	The directory where the `typescript` is stored
`outputDir`	`string`	`public-typescript`	The directory where the `javascript` is stored
`manifestName`	`string`	`manifest`	The name of the `manifest` file
`hash`	`boolean`	`true`	Whether the compiled `js` generates `hash`
`esbuildOptions`	`BuildOptions`	`{}`	esbuild build options
`sideEffects`	`boolean`	`true`	Whether to compile third-party libraries
`destination`	`string`	`memory`	Output mode: memory mode \| file mode
`cacheDir`	`string`	`node_modules/.vite-plugin-public-typescript`	The directory where the `manifest` cache is stored
`base`	`string`	vite config `base`	Resource base url
`publicDir`	`string`	vite config `publicDir`	public directory
`babel`	`boolean ｜ ESBuildPluginBabelOptions`	`false`	babel compilation (if you need to be compatible with browsers below es6, please turn it on)

Usage

// vite.config.ts
import { defineConfig } from 'vite'
import { publicTypescript } from 'vite-plugin-public-typescript'

export default defineConfig({
  plugins: [
    publicTypescript(),
    injectScripts((manifest) => [
      {
        attrs: {
          src: manifest.someScript,
        },
        injectTo: 'head',
      },
    ])
  ]
})

get manifest in client

import { manifest } from 'vite-plugin-public-typescript/client'

console.log(manifest)

SPA

In SPA applications, we can inject scripts into index.html via the injectScripts plugin.

For a full example, see: spa playground

vite config

import { defineConfig } from 'vite'
import { injectScripts, publicTypescript } from 'vite-plugin-public-typescript'

export default defineConfig({
  plugins: [
    publicTypescript(),
    injectScripts((manifest) => [
      {
        attrs: {
          src: manifest.spa,
        },
        injectTo: 'head-prepend',
      }
    ])
  ],
})

SSR

In an SSR application, we can easily change the html to be rendered by injecting a script into it, since the html is essentially just a string!

For a full example, see: ssr playground

vite config

import { defineConfig } from 'vite'
import { publicTypescript } from 'vite-plugin-public-typescript'

export default defineConfig({
  plugins: [
    publicTypescript(),
  ],
})

server.js

import { injectScriptsToHtml } from 'vite-plugin-public-typescript'

html = injectScriptsToHtml(html, (manifest) => [
  {
    attrs: {
      src: manifest.ssr,
    },
    injectTo: 'head-prepend',
  },
])