diff --git a/README-en.md b/README-en.md
new file mode 100644
index 0000000..980c4b8
--- /dev/null
+++ b/README-en.md
@@ -0,0 +1,170 @@
+
+
+
+ 
+
+
+ 
+
+
+
+
+ 
+ 
+
+
+# vite-plugin-public-typescript
+
+**English** | [中文](./README.md)
+
+> A vite plugin inject ts script into html
+
+**Compile typescript files in the specified directory then inject them into html**
+
+## Online Demo
+[Demo](https://hemengke1997.github.io/vite-plugin-public-typescript/)
+
+## Why
+
+- Suppose you want to execute some scripts before the page render, what should you do?
+- Suppose you don't want to inject `script` code into `index.html` in a hard-coded way, what should you do?
+- Suppose you want third-party scripts to have hash cache, what should you do?
+- ...
+
+**`vite-plugin-public-typescript` is born to solve these problems elegantly**
+
+## Install
+
+```bash
+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`](https://github.com/amfe/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
+
+```ts
+// 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
+
+```ts
+import { manifest } from 'vite-plugin-public-typescript/client'
+```
+
+### SPA
+
+In `SPA` applications, we can inject scripts into `index.html` via the `injectScripts` plugin.
+
+For a full example, see: [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
+
+
+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](./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
diff --git a/README.md b/README.md
index b394cad..e8b5697 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,9 @@
# vite-plugin-public-typescript
+
+**中文** | [English](./README-en.md)
+
> 在html中注入ts脚本的vite插件
**编译指定目录下的typescript文件，注入到html中使用**
@@ -31,10 +34,17 @@
**`vite-plugin-public-typescript` 为优雅解决这些问题而生**
-## 应用场景
+## 安装
+
+```bash
+pnpm add vite-plugin-public-typescript -D
+```
+
+
+## Scenarios
- 独立的第三方脚本，如 `sentry`，`google analytics`，`百度统计` 等
-- 希望在页面完全加载前就执行的脚本，如 [`modern-flexible`](https://github.com/hemengke1997/modern-flexible)，[`lib-flexible`](https://github.com/amfe/lib-flexible) 等
+- 希望在页面完全加载前就执行的脚本，如 [`lib-flexible`](https://github.com/amfe/lib-flexible) 等
- 初始化全局函数
## 功能
@@ -47,12 +57,6 @@
- 支持不同的输出方式（内存模式和文件模式）
- 支持 CSR 和 SSR 应用
-## 安装
-
-```bash
-pnpm add vite-plugin-public-typescript -D
-```
-
## 配置项
| 参数 | 类型 | 默认值 | 描述 |
@@ -75,6 +79,7 @@ pnpm add vite-plugin-public-typescript -D
## 用法
```ts
+// vite.config.ts
import { defineConfig } from 'vite'
import { injectScripts, publicTypescript } from 'vite-plugin-public-typescript'
@@ -84,7 +89,7 @@ export default defineConfig({
injectScripts((manifest) => [
{
attrs: {
- src: manifest.script,
+ src: manifest.someScript,
},
injectTo: 'head',
},