feat(docs): Add Chinese translation (#54)

Signed-off-by: ajiho <lujiahao@88.com>

Author: ajiho

docs/.vitepress/config/en.mjs

@@ -1,4 +1,5 @@
 import { defineConfig } from "vitepress";
+import pkg from '../../../package.json' with { type: 'json' }
 
 export const en = defineConfig({
   lang: "en-US",
@@ -45,7 +46,7 @@ function nav() {
       activeMatch: "/reference/",
     },
     {
-      text: "0.4.1",
+      text: pkg.bundlewatch.version,
       items: [
         {
           text: "Release Notes",

docs/.vitepress/config/index.mjs

@@ -1,12 +1,14 @@
 import { defineConfig } from "vitepress";
 import { shared } from "./shared.mjs";
 import { en } from "./en.mjs";
+import { zh } from "./zh.mjs";
 
 const config = {
   ...shared,
 
   locales: {
     root: { label: "English", ...en },
+    zh: { label: "简体中文", ...zh },
   },
 };
 

docs/.vitepress/config/zh.mjs

@@ -0,0 +1,106 @@
+import { defineConfig } from "vitepress";
+import pkg from '../../../package.json' with { type: 'json' }
+
+export const zh = defineConfig({
+  lang: "zh-Hans",
+  description: "观测你的包裹大小",
+
+  themeConfig: {
+    nav: nav(),
+
+    sidebar: {
+      "/zh/guide/": { base: "/zh/guide/", items: sidebarGuide() },
+      "/zh/reference/": {
+        base: "/zh/reference/",
+        items: sidebarReference(),
+      },
+    },
+
+    editLink: {
+      pattern:
+        "https://github.com/bundlewatch/bundlewatch.io/edit/master/docs/:path",
+      text: "在GitHub上编辑此页面",
+    },
+
+    outline: {
+      level: "deep",
+    },
+
+    footer: {
+      message: "根据 MIT 许可证发布。",
+      copyright: `版权所有 © 2018-至今 BundleWatch`,
+    },
+  },
+});
+
+function nav() {
+  return [
+    {
+      text: "指南",
+      link: "/zh/guide/what-is-it",
+      activeMatch: "/zh/guide/",
+    },
+    {
+      text: "参考",
+      link: "/zh/reference/configuration",
+      activeMatch: "/zh/reference/",
+    },
+    {
+      text: pkg.bundlewatch.version,
+      items: [
+        {
+          text: "Release Notes",
+          link: "https://github.com/bundlewatch/bundlewatch/releases/tag/v0.4.1",
+          target: "_blank",
+        },
+        {
+          text: "Contributing",
+          link: "https://github.com/bundlewatch/bundlewatch/blob/master/CONTRIBUTING.md",
+          target: "_blank",
+        },
+      ],
+    },
+  ];
+}
+
+function sidebarGuide() {
+  return [
+    {
+      text: "介绍",
+      items: [
+        { text: "这是什么？", link: "what-is-it" },
+        { text: "快速开始", link: "getting-started" },
+      ],
+    },
+    {
+      text: "如何使用",
+      items: [
+        { text: "使用 BundleWatch", link: "using-bundlewatch" },
+        { text: "使用配置文件", link: "using-a-config-file" },
+        {
+          text: "对比非主分支的构建差异",
+          link: "diffing-against-branches-other-than-master",
+        },
+        { text: "使用自定义服务器", link: "using-a-custom-server" },
+      ],
+    },
+    {
+      text: "配置、API 和 CLI 参考",
+      base: "/zh/reference/",
+      link: "/configuration",
+    },
+  ];
+}
+
+function sidebarReference() {
+  return [
+    {
+      text: "参考",
+      items: [
+        { text: "配置项", link: "configuration" },
+        { text: "NodeJS API", link: "nodejs" },
+        { text: "CLI 参数", link: "cli" },
+      ],
+    },
+  ];
+}

docs/zh/guide/diffing-against-branches-other-than-master.md

@@ -0,0 +1,38 @@
+---
+title: 对比除 Master 以外的分支
+description: 如何配置 Bundlewatch 以对比 develop 或 staging 等分支。
+---
+
+# 对比除 Master 以外的分支
+
+默认情况下，按照 [使用 Bundlewatch](./using-bundlewatch.md) 指南操作后，Bundlewatch 会将你的 bundle 与 `master` 分支进行对比。
+
+如果你想对比其他分支（例如 `develop`），请设置以下 CI 环境变量：
+
+- `CI_BRANCH_BASE`
+
+如果你使用的是 Travis 或 Drone，这通常会自动设置。
+
+::: info 信息
+查看哪些 CI 变量会被自动检测，请参阅 [getCIVars.js 源码](https://github.com/bundlewatch/bundlewatch/blob/master/src/app/config/getCIVars.js)。
+:::
+
+要对比多个分支（例如 `develop`、`staging`），请在 `package.json` 的 Bundlewatch 配置中添加 `trackBranches` 选项：
+
+```json
+{
+  "bundlewatch": {
+    "files": [
+      {
+        "path": "myfolder/*.js",
+        "maxSize": "100kB"
+      }
+    ],
+    "ci": {
+      "trackBranches": ["master", "develop", "staging"]
+    }
+  }
+}
+```
+
+更多配置选项，请参阅 [配置参考](../reference/configuration.md)。

docs/zh/guide/getting-started.md

@@ -0,0 +1,26 @@
+---
+title: 入门指南
+description: 分步指导你在项目中安装和设置 Bundlewatch。
+---
+
+# 入门指南
+
+本指南将帮助你在项目中安装并设置 Bundlewatch。
+
+## 安装
+
+你可以使用 npm 或 Yarn 安装 Bundlewatch：
+
+### 使用 npm
+
+```bash
+npm install bundlewatch --save-dev
+```
+
+### 使用 Yarn
+
+```bash
+yarn add bundlewatch --dev
+```
+
+现在你已经可以开始使用 BundleWatch 了！:tada:

docs/zh/guide/using-a-config-file.md

@@ -0,0 +1,33 @@
+---
+title: 使用配置文件
+description: 如何通过配置文件或 package.json 配置 Bundlewatch。
+---
+
+# 使用配置文件
+
+[Bundlewatch CLI](../reference/cli.md) 可以从 `.json`、`.js` 文件或你的 `package.json` 文件中读取配置。
+
+- 若要使用自定义配置文件，请在命令行中指定它：
+  ```bash
+  bundlewatch --config .bundlewatch.config.js
+  ```
+- 如果省略 `--config` 标志，Bundlewatch 会在你的 `package.json` 中查找 `bundlewatch` 键。
+
+`package.json` 配置示例：
+
+```json
+{
+  "name": "my package name",
+  "version": "0.0.1",
+  "bundlewatch": {
+    "files": [
+      {
+        "path": "myfolder/*.js",
+        "maxSize": "100kB"
+      }
+    ]
+  }
+}
+```
+
+你也可以直接将配置传递给 [Node.js API](../reference/nodejs.md)。

docs/zh/guide/using-a-custom-server.md

@@ -0,0 +1,23 @@
+---
+title: 使用自定义服务器
+description: 如何运行你自己的 Bundlewatch 服务并将项目配置为使用它。
+---
+
+# 在 Bundlewatch 中使用自定义服务器
+
+你可以通过 fork 官方服务仓库来运行你自己的 Bundlewatch 服务实例：
+
+https://github.com/bundlewatch/service
+
+在你喜欢的基础设施上启动你自己的实例。
+
+然后，更新你的 Bundlewatch 配置，使其指向你的自定义服务器：
+
+```js
+module.exports = {
+  files: [...],
+  bundlewatchServiceHost: 'https://my-bundlewatch-service.example.com',
+}
+```
+
+更多配置选项，请参阅 [配置参考](../reference/configuration.md)。

docs/zh/guide/using-bundlewatch.md

@@ -0,0 +1,69 @@
+---
+title: 使用 Bundlewatch
+description: 如何运行 Bundlewatch、设置 CI 集成以及查看结果。
+---
+
+# 基本用法
+
+在你构建好的资源上运行 Bundlewatch 以检查它们的体积：
+
+```bash
+yarn run bundlewatch --max-size 100kb ./webpack-build/*.js
+```
+
+示例输出：
+
+```
+结果详情见: https://ja2r7.app.goo.gl/aDzEQjBVMXxrCgaa7
+
+PASS ./webpack-build/app.js: 30.71KB < 100KB (gzip)
+FAIL ./webpack-build/vendor.js: 198.6KB > 100KB (gzip)
+
+BundleWatch FAIL
+```
+
+该命令会在终端中立即给出反馈。要在 GitHub Pull Request 上启用构建状态报告，请按照以下步骤操作。
+
+## 为 GitHub PR 添加构建状态
+
+Bundlewatch 可以直接在你的 GitHub Pull Request 上报告其状态。
+
+<div align="center">
+    <img alt="build status preview" data-zoomable src="/build-status-preview.png" width="700px">
+</div>
+
+## 设置 CI 认证
+
+你需要提供一个 `BUNDLEWATCH_GITHUB_TOKEN`，以便 Bundlewatch 能够更新你的 PR 状态。你可以在以下地址获取你的 token：
+
+https://service.bundlewatch.io/setup-github
+
+在你的 CI 环境中将此 token 设置为环境变量。
+
+## CI 所需环境变量
+
+在 CI 中，Bundlewatch 需要以下环境变量：
+
+- `CI_REPO_OWNER`（例如 github.com/facebook/react 中的 `facebook`）
+- `CI_REPO_NAME`（例如 github.com/facebook/react 中的 `react`）
+- `CI_COMMIT_SHA`
+- `CI_BRANCH`
+
+::: info
+如果你使用的是 Travis、CircleCI、Wrecker 或 Drone，这些变量通常会自动设置。
+详情见 [getCIVars.js](https://github.com/bundlewatch/bundlewatch/blob/master/src/app/config/getCIVars.js)。
+:::
+
+## 查看结果详情
+
+设置完成后，Bundlewatch 会在你的 PR 上发布构建状态。点击 _details_ 链接可以查看结果详情。
+
+<div align="center">
+    <img alt="build results preview" data-zoomable src="/build-results-preview.png" width="700px">
+</div>
+
+---
+
+- [配置 Bundlewatch](./using-a-config-file.md)
+- [对比其他分支](./diffing-against-branches-other-than-master.md)
+- [配置参考](../reference/configuration.md)

docs/zh/guide/what-is-it.md

@@ -0,0 +1,27 @@
+---
+title: 什么是 Bundlewatch？
+description: 了解 Bundlewatch 是什么，以及它如何帮助你监控 bundle 体积。
+---
+
+# 什么是 Bundlewatch？
+
+Bundlewatch 是一个检查你打包后的浏览器资源体积的工具，帮助你防止文件体积出现意外增长。
+
+## 为什么要使用 Bundlewatch？
+
+Bundlewatch 可以帮助你：
+
+- 检测新的依赖是否导致 bundle 体积膨胀
+- 捕捉意外的大型导入
+- 确保资源被正确压缩
+- 防止 bundle 体积随时间回退变大
+
+::: tip
+在构建生产环境资源后，在 CI 流水线中运行 `bundlewatch`。Bundlewatch 会跟踪这些文件，并在它们超过你配置的体积限制时提醒你。
+:::
+
+如果某个文件超过了最大体积，Bundlewatch 会在你的 GitHub Pull Request 上更新状态，并且可以阻止未通过检查的合并。
+
+---
+
+更多详情请参阅 [入门指南](./getting-started.md) 或 [配置参考](../reference/configuration.md)。