mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
docs: 优化部分文档
This commit is contained in:
winixt
parent
1acd6ca889
commit
366c4900e3
@ -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) 进行能力的对齐，如果开发者想要个性化定制模版，那么在配置上还是存在差异的。
|
||||
|
||||
## 升级 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 支持的方式。
|
||||
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) 进行个性化配置。
|
||||
|
||||
@ -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",
|
||||
"version": "2.0.0",
|
||||
"description": "fes项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"prod": "FES_ENV=prod fes build",
|
||||
"analyze": "ANALYZE=1 fes build",
|
||||
"dev": "fes dev",
|
||||
"test": "fes test"
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"files": [
|
||||
".eslintrc.js",
|
||||
".gitignore",
|
||||
".fes.js",
|
||||
".fes.prod.js",
|
||||
"mock.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tsconfig.json",
|
||||
"/src",
|
||||
"/config"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||
"directory": "packages/fes-template"
|
||||
},
|
||||
"author": "harrywan",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "0.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@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
|
||||
"name": "@fesjs/template",
|
||||
"version": "2.0.0",
|
||||
"description": "fes项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"prod": "FES_ENV=prod fes build",
|
||||
"analyze": "ANALYZE=1 fes build",
|
||||
"dev": "fes dev",
|
||||
"test": "fes test"
|
||||
},
|
||||
"keywords": ["管理端", "fes", "fast", "easy", "strong"],
|
||||
"files": [".eslintrc.js", ".gitignore", ".fes.js", ".fes.prod.js", "mock.js", "package.json", "README.md", "tsconfig.json", "/src", "/config"],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
|
||||
"directory": "packages/fes-template"
|
||||
},
|
||||
"author": "harrywan",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/WeBankFinTech/fes.js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "0.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@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
|
||||
运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。
|
||||
|
||||
运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。
|
||||
|
||||
@ -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` 包即可。
|
||||
|
||||
24
packages/create-fes-app/templates/app/h5/index.html
Normal file
24
packages/create-fes-app/templates/app/h5/index.html
Normal file
@ -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>
|
||||
@ -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"
|
||||
},
|
||||
|
||||
@ -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>
|
||||
@ -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"
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user