Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hemengke1997/vite-plugin-public-typescript
inject typescript into index.html
https://github.com/hemengke1997/vite-plugin-public-typescript
html inject inject-script typescript vite vite-plugin
Last synced: about 2 months ago
JSON representation
inject typescript into index.html
- Host: GitHub
- URL: https://github.com/hemengke1997/vite-plugin-public-typescript
- Owner: hemengke1997
- License: mit
- Created: 2022-11-07T09:50:58.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-02-07T13:57:58.000Z (4 months ago)
- Last Synced: 2024-04-07T16:46:00.598Z (about 2 months ago)
- Topics: html, inject, inject-script, typescript, vite, vite-plugin
- Language: TypeScript
- Homepage: https://hemengke1997.github.io/vite-plugin-public-typescript/
- Size: 15.7 MB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README-zh.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-vite - vite-plugin-public-typescript - Inject Typescript into `index.html`. (Plugins / Framework-agnostic Plugins)
README
# vite-plugin-public-typescript
**中文** | [English](./README.md)
> 在html中注入ts脚本的vite插件
**编译指定目录下的typescript文件，注入到html中使用**
## 在线示例
[Demo](https://hemengke1997.github.io/vite-plugin-public-typescript/)
## 为什么要使用此插件
- 如果你想在页面渲染之前就执行一些js代码
- 如果你不想在硬编码式地在 `index.html` 中注入 `script` 代码
- 如果你希望脚本有hash缓存
- 如果你希望项目全部使用typescript
- ...
**`vite-plugin-public-typescript` 为优雅解决这些问题而生**
## 安装
```bash
pnpm add vite-plugin-public-typescript -D
```
## Scenarios
- 独立的第三方脚本，如 `sentry`，`google analytics`，`百度统计` 等
- 希望在页面完全加载前就执行的脚本，如 [`lib-flexible`](https://github.com/amfe/lib-flexible) 等
- 初始化全局函数
## 功能
- 输出带有 `hash` 的js文件，无需担心缓存
- 默认 esbuild 编译，速度超快！
- 支持 babel 编译，无需担心浏览器兼容性
- 支持 vite 环境变量
- 支持 vite HMR
- 支持不同的输出方式（内存模式和文件模式）
- 支持 CSR 和 SSR 应用
## 配置项
| 参数 | 类型 | 默认值 | 描述 |
| --------------- | -------------------------------------- | --------------------------------------------- | ---------------------------------------------- |
| inputDir | `string` | `public-typescript` | 存放需要编译的 `typescript` 的目录 |
| outputDir | `string` | `/` | 输出公共 javascript 的目录，相对于 `publicDir` |
| manifestName | `string` | `manifest` | `manifest` 的文件名 |
| hash | `boolean` | `true` | 编译后的 `js` 是否生成 `hash ` |
| esbuildOptions | `BuildOptions` | `{}` | esbuild 构建选项 |
| ssrBuild | `boolean` | `false` | 当前打包环境是否是 ssr |
| ~~sideEffects~~ | `boolean` | `true` | 是否编译三方库(v2.0.0废弃⚠️) |
| destination | `string` | `memory` | 输出模式：内存模式 \| 文件模式 |
| cacheDir | `string` | `node_modules/.vite-plugin-public-typescript` | 存放manifest缓存的目录 |
| base | `string` | vite config 中的 `base` | 资源 base url |
| publicDir | `string` | vite config 中的 `publicDir` | public目录 |
| babel | `boolean ｜ ESBuildPluginBabelOptions` | `false` | babel编译（如果需要兼容es6以下浏览器，请开启） |
## 用法
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import { injectScripts, publicTypescript } from 'vite-plugin-public-typescript'
export default defineConfig({
plugins: [
publicTypescript(),
injectScripts((manifest) => [
{
attrs: {
src: manifest.someScript,
},
injectTo: 'head',
},
])
]
})
```
### 获取manifest
```ts
import { manifest } from 'vite-plugin-public-typescript/client'
console.log(manifest)
```
### SPA
在 `SPA` 应用中，我们可以通过 `injectScripts` 插件往 `index.html` 中注入 script
完整示例请参考：[spa playground](./playground/spa/vite.config.ts)
#### vite config
```ts
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
在 `SSR` 应用中，我们可以很轻松改变需要渲染的 html，往里面注入 script，因为实质上 `html` 就只是一个字符串而已
完整示例请参考：[ssr playground](./playground/ssr/index.html)
#### vite config
```ts
import { defineConfig } from 'vite'
import { publicTypescript } from 'vite-plugin-public-typescript'
export default defineConfig({
plugins: [
publicTypescript(),
],
})
```
#### server.js
```ts
import { injectScriptsToHtml } from 'vite-plugin-public-typescript'
html = injectScriptsToHtml(html, (manifest) => [
{
attrs: {
src: manifest.ssr,
},
injectTo: 'head-prepend',
},
])
```
## License
MIT
[npm-img]: https://img.shields.io/npm/v/vite-plugin-public-typescript.svg