docs: 优化部分文档

docs/zh/guide/builder.md

@@ -19,17 +19,4 @@ Webpack 和 Vite 构建在配置方面有一些差异，具体可以查看[配
 
 ### html 模版
 
-Webpack 对于 html 模版是没有什么限制的，而 Vite 推荐模版文件就放在项目根目录下。Webpack 有个非常强大的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)，Fes.js 引入了[vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 进行能力的对齐，如果开发者想要个性化定制模版，那么在配置上还是存在差异的。
+html 模版比较常规的需求，例如模版变量，Webpack 和 Vite 之间没什么差异。如果有其他特殊的需求， Webpack 可以使用 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)，Vite 使用[vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 进行个性化配置。
-
-## 升级 2.1.x
-
-### 不变更构建方式
-
-直接添加 Webpack 构建依赖包即可： `npm i @fesjs/build-webpack -D`。
-
-### 换成 Vite
-
-1. 安装依赖包 `npm i @fesjs/build-vite`。
-2. 将 Webpack 相关的配置换成 Vite，具体可查看[配置](../reference/config)。
-3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，如果有相应的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 配置，需要改成 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的写法。
-4. 将 `require` 等 Vite 不支持的代码，改写成 Vite 支持的方式。

docs/zh/guide/directory-structure.md

@@ -1,6 +1,7 @@
 # 目录结构
 
 在[快速上手](./getting-started.html)中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 `约定优于配置` 的原则，一个基础的 Fes.js 项目大致是这样的：
+
 ```
 fes-template
 ├── package.json
@@ -8,9 +9,10 @@ fes-template
 ├── mock.js
 ├── .fes.js
 ├── .env
+├── index.html
 ├── dist
 ├── public
-│   └── index.html
+│   └── logo.png
 └── src
     ├── .fes
     └── pages
@@ -19,113 +21,108 @@ fes-template
 ```
 
 ### package.json
+
 ```json
 {
-  "name": "@fesjs/template",
+    "name": "@fesjs/template",
-  "version": "2.0.0",
+    "version": "2.0.0",
-  "description": "fes项目模版",
+    "description": "fes项目模版",
-  "scripts": {
+    "scripts": {
-    "build": "fes build",
+        "build": "fes build",
-    "prod": "FES_ENV=prod fes build",
+        "prod": "FES_ENV=prod fes build",
-    "analyze": "ANALYZE=1 fes build",
+        "analyze": "ANALYZE=1 fes build",
-    "dev": "fes dev",
+        "dev": "fes dev",
-    "test": "fes test"
+        "test": "fes test"
-  },
+    },
-  "keywords": [
+    "keywords": ["管理端", "fes", "fast", "easy", "strong"],
-    "管理端",
+    "files": [".eslintrc.js", ".gitignore", ".fes.js", ".fes.prod.js", "mock.js", "package.json", "README.md", "tsconfig.json", "/src", "/config"],
-    "fes",
+    "repository": {
-    "fast",
+        "type": "git",
-    "easy",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "strong"
+        "directory": "packages/fes-template"
-  ],
+    },
-  "files": [
+    "author": "harrywan",
-    ".eslintrc.js",
+    "license": "MIT",
-    ".gitignore",
+    "bugs": {
-    ".fes.js",
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
-    ".fes.prod.js",
+    },
-    "mock.js",
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-    "package.json",
+    "publishConfig": {
-    "README.md",
+        "access": "public"
-    "tsconfig.json",
+    },
-    "/src",
+    "devDependencies": {
-    "/config"
+        "@webank/eslint-config-webank": "0.3.1"
-  ],
+    },
-  "repository": {
+    "dependencies": {
-    "type": "git",
+        "@fesjs/fes": "^2.0.0",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "@fesjs/plugin-access": "^2.0.0",
-    "directory": "packages/fes-template"
+        "@fesjs/plugin-layout": "^3.0.0",
-  },
+        "@fesjs/plugin-locale": "^3.0.0",
-  "author": "harrywan",
+        "@fesjs/plugin-model": "^2.0.0",
-  "license": "MIT",
+        "@fesjs/plugin-enums": "^2.0.0",
-  "bugs": {
+        "@fesjs/plugin-jest": "^2.0.0",
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
+        "@fesjs/plugin-vuex": "^2.0.0",
-  },
+        "@fesjs/plugin-request": "^2.0.0",
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+        "@fesjs/plugin-qiankun": "^2.0.0",
-  "publishConfig": {
+        "@fesjs/plugin-sass": "^2.0.0",
-    "access": "public"
+        "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
-  },
+        "@fesjs/plugin-windicss": "^2.0.0",
-  "devDependencies": {
+        "@fesjs/fes-design": "^0.1.10",
-    "@webank/eslint-config-webank": "0.3.1"
+        "vue": "^3.0.5",
-  },
+        "vuex": "^4.0.0"
-  "dependencies": {
+    },
-    "@fesjs/fes": "^2.0.0",
+    "private": true
-    "@fesjs/plugin-access": "^2.0.0",
-    "@fesjs/plugin-layout": "^3.0.0",
-    "@fesjs/plugin-locale": "^3.0.0",
-    "@fesjs/plugin-model": "^2.0.0",
-    "@fesjs/plugin-enums": "^2.0.0",
-    "@fesjs/plugin-jest": "^2.0.0",
-    "@fesjs/plugin-vuex": "^2.0.0",
-    "@fesjs/plugin-request": "^2.0.0",
-    "@fesjs/plugin-qiankun": "^2.0.0",
-    "@fesjs/plugin-sass": "^2.0.0",
-    "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
-    "@fesjs/plugin-windicss": "^2.0.0",
-    "@fesjs/fes-design": "^0.1.10",
-    "vue": "^3.0.5",
-    "vuex": "^4.0.0"
-  },
-  "private": true
 }
 ```
+
 其中`@fesjs/fes`是 Fes.js 核心依赖，另外以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。
 
 ### tsconfig.json
+
 解决 `@fesjs/fes` 和使用 `@` 的 API 提示
 
 ### .fes.js
+
 配置文件，包含 Fes.js 内置功能和安装的其他插件配置。
 
 ### mock.js
+
 `mock` 数据的配置文件。
 
 ### .env
+
 定义环境变量。
 
 比如 `.env` 文件内容如下：
+
 ```
 PORT=8888
 FES_ENV=prod
 ```
+
 等同于 node 端运行时，设置如下：
+
 ```
 process.env.PORT = '8888';
 process.env.FES_ENV = 'prod';
 ```
 
-
 ### dist 目录
+
 执行 `fes build` 后，产物默认会存放在这里。
 
 ## public 目录
+
 此目录下所有文件为静态资源，会被复制到输出路径。
 
-### index.html
+## index.html
+
 默认的 `html` 模板文件，如果删除此 `html` 则会使用内置的 `html` 模板文件。
 
 ## src 目录
 
 ### .fes 目录
+
 临时文件目录，比如入口文件、路由等，都会被临时生成到这里。
 
 :::warning
@@ -133,7 +130,9 @@ process.env.FES_ENV = 'prod';
 :::
 
 ### pages 目录
+
 所有路由组件文件存放在这里。
 
 ### app.js
-运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。
+
+运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。

docs/zh/guide/upgrade2.1.md

@@ -19,4 +19,11 @@
 2. 将 Webpack 相关的配置换成 Vite，具体可查看[配置](../reference/config)。
 3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，如果有相应的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 配置，需要改成 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的写法。
 4. 将 `require` 等 Vite 不支持的代码，改写成 Vite 支持的方式。
-5. 由于需要兼容 Vite 写法，相关插件也做了相关调整，因此依赖的插件都需要升级最新的版本。如果用了 [@fesjs/plugin-sass](../reference/plugin/plugins/sass.html) 插件，直接移除，手动安装 `sass` 依赖即可。
+
+## 插件
+
+如果使用 Webpack 构建，插件是向后兼容的。如果是使用 Vite 构建，大部分插件也是向后兼容的，需要处理的插件有：
+
+-   [@fesjs/plugin-qiankun](../reference/plugins/qiankun) 需要升级到 `2.1.x` 版本。
+-   [@fesjs/plugin-windicss](../reference/plugins/windicss) 需要升级到 `2.1.x` 版本。
+-   [@fesjs/plugin-sass](../reference/plugins/sass) 直接移除，再安装 `sass` 包即可。

packages/create-fes-app/templates/app/h5/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  <meta name="format-detection" content="telephone=no" />
+  <meta name="format-detection" content="email=no" />
+  <meta name="viewport"
+    content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
+  <title>
+    <%= title %>
+  </title>
+  <link rel="shortcut icon" type="image/x-icon" href="./logo.png">
+</head>
+
+<body ontouchstart="">
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>

packages/create-fes-app/templates/app/h5/package.json

@@ -48,6 +48,7 @@
     "@fesjs/fes": "^2.0.0",
     "@fesjs/plugin-icon": "^2.0.0",
     "@fesjs/plugin-request": "^2.0.0",
+    "@fesjs/build-webpack": "^1.0.0",
     "vue": "^3.2.6",
     "core-js": "^3.8.3"
   },

packages/create-fes-app/templates/app/h5/public/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
-    <meta name="format-detection" content="telephone=no"/>
-    <meta name="format-detection" content="email=no"/>
-    <meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="shortcut icon" type="image/x-icon" href="./logo.png">
-  </head>
-  <body ontouchstart="">
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

packages/create-fes-app/templates/app/pc/package.json

@@ -52,7 +52,8 @@
     "@fesjs/plugin-layout": "^4.0.0",
     "@fesjs/plugin-model": "^2.0.0",
     "@fesjs/plugin-enums": "^2.0.0",
-    "@fesjs/fes-design": "^0.3.0",
+    "@fesjs/fes-design": "^0.4.0",
+    "@fesjs/build-webpack": "^1.0.0",
     "vue": "^3.2.6",
     "core-js": "^3.8.3"
   },