docs: add english version

hemengke1997 · Nov 20, 2023 · d74faea · d74faea
1 parent 8eb6799
commit d74faea
Show file tree

Hide file tree

Showing 2 changed files with 184 additions and 9 deletions.
diff --git a/README-en.md b/README-en.md
@@ -0,0 +1,170 @@
+
+<p align="center">
+  <a href="https://vitejs.dev" style="margin-right: 32px;" target="_blank" rel="noopener noreferrer">
+    <img width="140" src="https://vitejs.dev/logo.svg" alt="Vite logo" />
+  </a>
+  <a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">
+    <img width="140" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg" alt="Typescript logo" />
+  </a>
+</p>
+<br/>
+<p align="center">
+  <a href="https://npmjs.com/package/vite-plugin-public-typescript"><img src="https://img.shields.io/npm/v/vite-plugin-public-typescript.svg" alt="npm package"></a>
+  <a href="https://nodejs.org/en/about/previous-releases"><img src="https://img.shields.io/node/v/vite-plugin-public-typescript.svg" alt="node compatibility"></a>
+</p>
+
+# 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
@@ -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',
       },