English | 中文

A vite plugin inject typescript script into html

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

Demo

• 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

pnpm add vite-plugin-public-typescript -D

• 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
• ...

• 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

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

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

console.log(manifest)

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

For a full example, see: spa playground

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

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

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

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

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

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

MIT