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',
  },
])

License

MIT