Awesome

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

Usage

Note: The default value of 'inputDir' in 'publicTypescript' is 'public-typescript', you can also reconfigure this property. Then you need to create a folder with the same name in the same directory as' vite.config.ts' and create a '.ts' file inside it

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

export default defineConfig({
  plugins: [
    // If you use the default configuration, the source code location 'inputDir' defaults to 'public-typescript'
    publicTypescript(),
    injectScripts((manifest) => [
      {
        attrs: {
          // The file name in the directory, for example, test.ts --> manifest.test
          src: manifest.someScript,
        },
        injectTo: 'head',
      },
    ])
  ]
})

Typescript types

{
  "compilerOptions": {   
    "types": ["vite-plugin-public-typescript/virtual"]
  }
}

get manifest in client

Note: The code here can only be used in the project code, not in 'vite.config.ts' and other build time code, because it is generated after the build

import { manifest } from 'virtual:public-typescript-manifest'

console.log(manifest)

If you need to get the 'manifest' at build time, such as custom implementation of your own vite plugin 'injectScript', use the following code

import { getManifest } from 'vite-plugin-public-typescript';

console.log(getManifest())

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