blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity

docs: 优化编译时文档

Browse Source
This commit is contained in:
winixt 2022-04-04 18:12:31 +08:00
parent ec1ba22616
commit 4732acc233
7 changed files with 1006 additions and 836 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vuepress/configs/navbar/zh.ts
View File

@ -6,7 +6,7 @@ export const zh: NavbarConfig = [
link: '/zh/guide/', link: '/zh/guide/',
}, },
{ {
text: '配置', text: '编译时配置',
link: '/zh/reference/config/', link: '/zh/reference/config/',
}, },
{ {

344
docs/reference/config/README.md
View File

@ -4,29 +4,31 @@ sidebar: auto
# 配置 # 配置
以下配置项通过字母排序。
## alias ## alias
- 类型： `object` - 类型： `object`
- 默认值： `{}` - 默认值： `{}`
- 详情： - 详情：
配置别名，对引用路径进行映射。 配置别名，对引用路径进行映射。
- 示例： - 示例：
```js ```js
export default { export default {
alias: { alias: {
main: 'src/assets/styles/main' main: 'src/assets/styles/main',
} },
} };
``` ```
然后 `import('main')`，实际上是 `import('src/assets/styles/main')`。 然后 `import('main')`，实际上是 `import('src/assets/styles/main')`。
## analyze ## analyze
- 类型： `object`
- 默认值： - 类型： `object`
- 默认值：
```js ```js
{ {
analyzerMode: process.env.ANALYZE_MODE || 'server', analyzerMode: process.env.ANALYZE_MODE || 'server',
@ -39,40 +41,39 @@ export default {
defaultSizes: 'parsed' // stat // gzip defaultSizes: 'parsed' // stat // gzip
} }
``` ```
- 详情：
- 详情：
构建结果分析，当配置 `process.env.ANALYZE` 时开启，例如执行`ANALYZE=1 fes build` 构建结果分析，当配置 `process.env.ANALYZE` 时开启，例如执行`ANALYZE=1 fes build`
## autoprefixer ## autoprefixer
- 类型： `object`
- 默认值： - 类型： `object`
- 默认值：
```js ```js
{ {
flexbox: 'no-2009' flexbox: 'no-2009';
} }
``` ```
- 详情：
- 详情：
[postcss autoprefixer 插件](https://github.com/postcss/autoprefixer#options) 配置。 [postcss autoprefixer 插件](https://github.com/postcss/autoprefixer#options) 配置。
## base ## base
- 类型： `string` - 类型： `string`
- 默认值： `''` - 默认值： `''`
- 详情： - 详情：
设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。 设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。
## chainWebpack ## chainWebpack
- 类型：`function` - 类型：`function`
- 默认值：`null` - 默认值：`null`
- 详情： - 详情：
通过 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 的 API 修改 webpack 配置。 通过 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 的 API 修改 webpack 配置。
@ -84,117 +85,125 @@ export default {
// 删除 fes 内置插件 // 删除 fes 内置插件
memo.plugins.delete('copy'); memo.plugins.delete('copy');
}, },
} };
``` ```
## cssLoader ## cssLoader
- 类型： `object` - 类型： `object`
- 默认值： `''` - 默认值： `''`
- 详情： - 详情：
设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。 设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。
## copy ## copy
- 类型： `Array(string) || Array(object)` - 类型： `Array(string) || Array(object)`
- 默认值： `[]` - 默认值： `[]`
- 详情： - 详情：
设置要复制到输出目录的文件、文件夹。 设置要复制到输出目录的文件、文件夹。
配置约定 `from-to` 规则， 其中 `from` 是相对于 `cwd` 的路径，`to` 是相对于输出路径的路径。 配置约定 `from-to` 规则， 其中 `from` 是相对于 `cwd` 的路径，`to` 是相对于输出路径的路径。
- 示例：
- 示例：
```js ```js
export default { export default {
copy: { copy: {
from: '/src/assets/images', from: '/src/assets/images',
to: 'assets/images' to: 'assets/images',
} },
} };
``` ```
上面示例中，实现了将 `cwd` 路径中的 `/src/assets/images` 文件夹，在编译完成后，`copy` 到输出路径下的 `assets/images` 文件夹。 上面示例中，实现了将 `cwd` 路径中的 `/src/assets/images` 文件夹，在编译完成后，`copy` 到输出路径下的 `assets/images` 文件夹。
## define ## define
- 类型： `object` - 类型： `object`
- 默认值： `{}` - 默认值： `{}`
- 详情： - 详情：
用于提供给代码中可用的变量。 用于提供给代码中可用的变量。
- 示例： - 示例：
```js ```js
export default { export default {
define: { define: {
__DEV__: 'development' __DEV__: 'development',
} },
} };
``` ```
然后你代码里写 `console.log(__DEV__)`，会被编译成 `console.log('development')`。 然后你代码里写 `console.log(__DEV__)`，会被编译成 `console.log('development')`。
## devServer ## devServer
- 类型： `object` - 类型： `object`
- 默认值： `{}` - 默认值： `{}`
- 详情： - 详情：
配置开发服务器。支持以下子配置项： 配置开发服务器。支持以下子配置项：
- port，端口号，默认 `8000` - port，端口号，默认 `8000`
- host，默认 `localhost` - host，默认 `localhost`
- https，是否启用 https server，同时也会开启 HTTP/2 - https，是否启用 https server，同时也会开启 HTTP/2
启用 port 和 host 也可以通过环境变量 `PORT` 和 `HOST` 临时指定。 启用 port 和 host 也可以通过环境变量 `PORT` 和 `HOST` 临时指定。
## devtool ## devtool
- 类型： `string` - 类型： `string`
- 默认值： `cheap-module-source-map` in dev, `undefined` in build - 默认值： `cheap-module-source-map` in dev, `undefined` in build
- 详情： - 详情：
用户配置 sourcemap 类型。详见 [ webpack#devtool 配置](https://webpack.js.org/configuration/devtool/#devtool)。 用户配置 sourcemap 类型。详见 [ webpack#devtool 配置](https://webpack.js.org/configuration/devtool/#devtool)。
## dynamicImport ## dynamicImport
- 类型： `boolean` - 类型： `boolean`
- 默认值： false - 默认值： false
- 详情： - 详情：
路由是否按需加载 路由是否按需加载
## exportStatic ## exportStatic
- 类型： `object` - 类型： `object`
- 默认值： `{}` - 默认值： `{}`
- 详情： - 详情：
配置 `html` 的输出形式，默认只输出 `index.html`。 配置 `html` 的输出形式，默认只输出 `index.html`。
如果开启 `exportStatic`，则会针对每个路由输出 `html` 文件。 如果开启 `exportStatic`，则会针对每个路由输出 `html` 文件。
比如以下路由， 比如以下路由，
``` ```
/ /
/users /users
/list /list
``` ```
不开启 `exportStatic` 时，输出， 不开启 `exportStatic` 时，输出，
``` ```
- index.html - index.html
``` ```
设置 `exportStatic: {}` 后，输出， 设置 `exportStatic: {}` 后，输出，
``` ```
- index.html - index.html
- users.html - users.html
- list.html - list.html
``` ```
## externals ## externals
- 类型：`object` - 类型：`object`
- 默认值：`{}` - 默认值：`{}`
- 详情： - 详情：
设置哪些模块可以不被打包，通过 `<script>` 或其他方式引入。 设置哪些模块可以不被打包，通过 `<script>` 或其他方式引入。
@ -203,111 +212,111 @@ export default {
```js ```js
export default { export default {
externals: { externals: {
vue: 'window.Vue', vue: 'window.Vue',
}, },
} };
``` ```
## extraBabelPlugins ## extraBabelPlugins
- 类型： `array` - 类型： `array`
- 默认值： `[]` - 默认值： `[]`
- 详情： - 详情：
配置额外的 `babel` 插件。 配置额外的 `babel` 插件。
- 示例：
- 示例：
```js ```js
export default { export default {
extraBabelPlugins: [ extraBabelPlugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]],
['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }], };
],
}
``` ```
## extraBabelPresets ## extraBabelPresets
- 类型： `array` - 类型： `array`
- 默认值： `[]` - 默认值： `[]`
- 详情： - 详情：
配置额外的 `babel` 插件集。
配置额外的 `babel` 插件集。
## extraPostCSSPlugins ## extraPostCSSPlugins
- 类型： `array` - 类型： `array`
- 默认值： `[]` - 默认值： `[]`
- 详情： - 详情：
设置额外的 [postcss 插件](https://github.com/postcss/postcss/blob/master/docs/plugins.md)。 设置额外的 [postcss 插件](https://github.com/postcss/postcss/blob/master/docs/plugins.md)。
## html ## html
- 类型： `object`
- 默认值： `{}` - 类型： `object`
- 详情： - 默认值： `{}`
- 详情：
设置[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin#options)。 设置[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin#options)。
## inlineLimit ## inlineLimit
- 类型： `number` - 类型： `number`
- 默认值： `8192`(8k) - 默认值： `8192`(8k)
- 详情： - 详情：
配置图片文件是否走 base64 编译的阈值。默认是 `8192` 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。 配置图片文件是否走 base64 编译的阈值。默认是 `8192` 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。
## lessLoader ## lessLoader
- 类型： `object` - 类型： `object`
- 默认值： `{}` - 默认值： `{}`
- 详情： - 详情：
设置 [less-loader 配置项](https://github.com/webpack-contrib/less-loader)。 设置 [less-loader 配置项](https://github.com/webpack-contrib/less-loader)。
## mock ## mock
- 类型： `object || boolean` - 类型： `object || boolean`
- 默认值： `{}` - 默认值： `{}`
- 详情： - 详情：
配置 mock 属性。 配置 mock 属性。
- 当 mock 为 `boolean` 类型时，`true` 表示打开 mock，`false` 表示关闭 mock。 - 当 mock 为 `boolean` 类型时，`true` 表示打开 mock，`false` 表示关闭 mock。
- 当 mock 为 `object` 类型时，默认打开 mock。也可以通过子属性 `prefix` 添加过滤条件，满足条件的走 mock 文件。 - 当 mock 为 `object` 类型时，默认打开 mock。也可以通过子属性 `prefix` 添加过滤条件，满足条件的走 mock 文件。
- 示例：
- 示例：
```js ```js
export default { export default {
mock: { mock: {
prefix: '/api/auth' prefix: '/api/auth',
} },
} };
``` ```
然后所有以 `/api/users` 开始的请求，就能进入 mock.js 文件处理。 然后所有以 `/api/users` 开始的请求，就能进入 mock.js 文件处理。
## mountElementId ## mountElementId
- 类型： `string` - 类型： `string`
- 默认值： `app` - 默认值： `app`
- 详情： - 详情：
指定渲染到的 HTML 元素 id。 指定渲染到的 HTML 元素 id。
## nodeModulesTransform ## nodeModulesTransform
- 类型： `object` - 类型： `object`
- 默认值： `{ exclude: [] }` - 默认值： `{ exclude: [] }`
- 详情： - 详情：
默认编译所有 `node_modules` 下的包，可以通过配置 `exclude` 来跳过某些包，以提高编译速度。 默认编译所有 `node_modules` 下的包，可以通过配置 `exclude` 来跳过某些包，以提高编译速度。
## outputPath ## outputPath
- 类型： `string` - 类型： `string`
- 默认值： `dist` - 默认值： `dist`
- 详情： - 详情：
指定输出路径。 指定输出路径。
@ -317,91 +326,96 @@ export default {
## plugins ## plugins
- 类型： `Array(string)` - 类型： `Array(string)`
- 默认值： `[]` - 默认值： `[]`
- 详情： - 详情：
配置额外的 `fes` 插件。 配置额外的 `fes` 插件。
数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。 数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。
- 示例： - 示例：
```js ```js
export default { export default {
plugins: [ plugins: [
// npm 依赖 // npm 依赖
'fes-plugin-hello', 'fes-plugin-hello',
// 相对路径 // 相对路径
'./plugin', './plugin',
// 绝对路径 // 绝对路径
`${__dirname}/plugin.js`, `${__dirname}/plugin.js`,
], ],
}; };
``` ```
## postcssLoader ## postcssLoader
- 类型： `object` - 类型： `object`
- 默认值： `{}` - 默认值： `{}`
- 详情： - 详情：
设置 [postcss-loader 配置项](https://github.com/postcss/postcss-loader#options)。 设置 [postcss-loader 配置项](https://github.com/postcss/postcss-loader#options)。
## proxy ## proxy
- 类型： `object` - 类型： `object`
- 默认值： `{}` - 默认值： `{}`
- 详情： - 详情：
配置代理能力。 配置代理能力。
- 示例： - 示例：
```js ```js
export default { export default {
proxy: { proxy: {
'/v2': { '/v2': {
'target': 'https://api.douban.com/', target: 'https://api.douban.com/',
'changeOrigin': true, changeOrigin: true,
} },
} },
} };
``` ```
然后访问 `/v2/movie/in_theaters_proxy` 就能访问到 [http://api.douban.com/v2/movie/in_theaters_proxy](http://api.douban.com/v2/movie/in_theaters_proxy) 的数据。 然后访问 `/v2/movie/in_theaters_proxy` 就能访问到 [http://api.douban.com/v2/movie/in_theaters_proxy](http://api.douban.com/v2/movie/in_theaters_proxy) 的数据。
## publicPath ## publicPath
- 类型： `string` - 类型： `string`
- 默认值： `/` - 默认值： `/`
- 详情： - 详情：
配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。 配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。
## router ## router
- 类型： `object` - 类型： `object`
- 默认值： `{ mode: 'hash' }` - 默认值： `{ mode: 'hash' }`
- 详情： - 详情：
配置路由，具体请查看指南中关于路由的介绍 配置路由，具体请查看指南中关于路由的介绍
## singular ## singular
- 类型： `boolean`
- 默认值： `false` - 类型： `boolean`
- 详情： - 默认值： `false`
- 详情：
配置是否启用单数模式的目录。 比如 `src/pages` 的约定在开启后为 `src/page` 目录，@fesjs/fes-plugins 插件也遵照此配置的约定。 配置是否启用单数模式的目录。 比如 `src/pages` 的约定在开启后为 `src/page` 目录，@fesjs/fes-plugins 插件也遵照此配置的约定。
## targets ## targets
- 类型： `object`
- 默认值： `{}` - 类型： `object`
- 详情： - 默认值： `{}`
- 详情：
配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。 配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。
## terserOptions ## terserOptions
- 类型： `object` - 类型： `object`
- 默认值： - 默认值：
```js ```js
const defaultTerserOptions = { const defaultTerserOptions = {
compress: { compress: {
@ -433,20 +447,22 @@ const defaultTerserOptions = {
// required features to drop conditional branches // required features to drop conditional branches
conditionals: true, conditionals: true,
dead_code: true, dead_code: true,
evaluate: true evaluate: true,
}, },
mangle: { mangle: {
safari10: true safari10: true,
} },
} };
``` ```
- 详情：
- 详情：
配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options) 配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options)
## vueLoader ## vueLoader
- 类型： `object`
- 默认值：`{}`
- 详情：
配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html) - 类型： `object`
- 默认值：`{}`
- 详情：
配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html)

706
docs/zh/reference/config/README.md
View File

@ -2,312 +2,152 @@
sidebar: auto sidebar: auto
--- ---
# 配置 ## 配置文件
以下配置项通过字母排序。 Fes.js 内置了比较通用的构建方式，如果没有个性化需求，不需要修改构建相关的配置。
## alias ### 配置文件解析
- 类型： `object` Fes.js 会自动解析项目根目录下的 `.fes.js` 文件。
- 默认值： `{}`
- 详情： 最基础的配置文件是这样的：
```js
// .fes.js
export default {};
```
可以通过环境变量 `FES_ENV` 进行环境差异化配置，当我们运行 `FES_ENV=prod fes dev` 时，Fes.js 会找到 `.fes.js` 和 `.fes.prod.js`(可选) 的配置文件进行 `deepmerge`。
### 配置智能提示
可以通过 `defineBuildConfig` 工具函数获取类型提示：
```js
import { defineBuildConfig } from '@fesjs/fes';
export default defineBuildConfig({});
```
## 共享配置
### alias
- 类型： `object`
- 默认值： `{}`
- 详情：
配置别名，对引用路径进行映射。 配置别名，对引用路径进行映射。
- 示例： - 示例：
```js ```js
export default { export default {
alias: { alias: {
main: 'src/assets/styles/main' main: 'src/assets/styles/main',
} },
} };
``` ```
然后 `import('main')`，实际上是 `import('src/assets/styles/main')`。 然后 `import('main')`，实际上是 `import('src/assets/styles/main')`。
## analyze ### autoprefixer
- 类型： `object`
- 默认值： - 类型： `object`
- 默认值：
```js ```js
{ {
analyzerMode: process.env.ANALYZE_MODE || 'server', flexbox: 'no-2009';
analyzerPort: process.env.ANALYZE_PORT || 8888,
openAnalyzer: process.env.ANALYZE_OPEN !== 'none',
// generate stats file while ANALYZE_DUMP exist
generateStatsFile: !!process.env.ANALYZE_DUMP,
statsFilename: process.env.ANALYZE_DUMP || 'stats.json',
logLevel: process.env.ANALYZE_LOG_LEVEL || 'info',
defaultSizes: 'parsed' // stat // gzip
} }
``` ```
- 详情：
构建结果分析，当配置 `process.env.ANALYZE` 时开启，例如执行`ANALYZE=1 fes build` - 详情：
## autoprefixer
- 类型： `object`
- 默认值：
```js
{
flexbox: 'no-2009'
}
```
- 详情：
[postcss autoprefixer 插件](https://github.com/postcss/autoprefixer#options) 配置。 [postcss autoprefixer 插件](https://github.com/postcss/autoprefixer#options) 配置。
### base
- 类型： `string`
## base - 默认值： `''`
- 详情：
- 类型： `string`
- 默认值： `''`
- 详情：
设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。 设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。
::: warning 2.1.x 已废弃
2.1.x 版本请使用 router.base 代替
:::
### define
- 类型： `object`
## chainWebpack - 默认值： `{}`
- 详情：
- 类型：`function`
- 默认值：`null`
- 详情：
通过 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 的 API 修改 webpack 配置。
示例：
```js
export default {
chainWebpack(memo, { env, webpack }) {
// 删除 fes 内置插件
memo.plugins.delete('copy');
},
}
```
## cssLoader
- 类型： `object`
- 默认值： `''`
- 详情：
设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。
## copy
- 类型： `Array(string) || Array(object)`
- 默认值： `[]`
- 详情：
设置要复制到输出目录的文件、文件夹。
配置约定 `from-to` 规则， 其中 `from` 是相对于 `cwd` 的路径，`to` 是相对于输出路径的路径。
- 示例：
```js
export default {
copy: {
from: '/src/assets/images',
to: 'assets/images'
}
}
```
上面示例中，实现了将 `cwd` 路径中的 `/src/assets/images` 文件夹，在编译完成后，`copy` 到输出路径下的 `assets/images` 文件夹。
## define
- 类型： `object`
- 默认值： `{}`
- 详情：
用于提供给代码中可用的变量。 用于提供给代码中可用的变量。
- 示例： - 示例：
```js ```js
export default { export default {
define: { define: {
__DEV__: 'development' __DEV__: 'development',
} },
} };
``` ```
然后你代码里写 `console.log(__DEV__)`，会被编译成 `console.log('development')`。 然后你代码里写 `console.log(__DEV__)`，会被编译成 `console.log('development')`。
## devServer ### dynamicImport
- 类型： `object` - 类型： `boolean`
- 默认值： `{}` - 默认值： false
- 详情： - 详情：
配置开发服务器。支持以下子配置项：
- port，端口号，默认 `8000`
- host，默认 `localhost`
- https，是否启用 https server，同时也会开启 HTTP/2
启用 port 和 host 也可以通过环境变量 `PORT` 和 `HOST` 临时指定。
## devtool
- 类型： `string`
- 默认值： `cheap-module-source-map` in dev, `undefined` in build
- 详情：
用户配置 sourcemap 类型。详见 [ webpack#devtool 配置](https://webpack.js.org/configuration/devtool/#devtool)。
## dynamicImport
- 类型： `boolean`
- 默认值： false
- 详情：
路由是否按需加载 路由是否按需加载
### inlineLimit
## exportStatic - 类型： `number`
- 默认值： `8192`(8k)
- 类型： `object` - 详情：
- 默认值： `{}`
- 详情：
配置 `html` 的输出形式，默认只输出 `index.html`。
如果开启 `exportStatic`，则会针对每个路由输出 `html` 文件。
比如以下路由，
```
/
/users
/list
```
不开启 `exportStatic` 时，输出，
```
- index.html
```
设置 `exportStatic: {}` 后，输出，
```
- index.html
- users.html
- list.html
```
## externals
- 类型：`object`
- 默认值：`{}`
- 详情：
设置哪些模块可以不被打包，通过 `<script>` 或其他方式引入。
示例：
```js
export default {
externals: {
vue: 'window.Vue',
},
}
```
## extraBabelPlugins
- 类型： `array`
- 默认值： `[]`
- 详情：
配置额外的 `babel` 插件。
- 示例：
```js
export default {
extraBabelPlugins: [
['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }],
],
}
```
## extraBabelPresets
- 类型： `array`
- 默认值： `[]`
- 详情：
配置额外的 `babel` 插件集。
## extraPostCSSPlugins
- 类型： `array`
- 默认值： `[]`
- 详情：
设置额外的 [postcss 插件](https://github.com/postcss/postcss/blob/master/docs/plugins.md)。
## html
- 类型： `object`
- 默认值： `{}`
- 详情：
设置[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin#options)。
## inlineLimit
- 类型： `number`
- 默认值： `8192`(8k)
- 详情：
配置图片文件是否走 base64 编译的阈值。默认是 `8192` 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。 配置图片文件是否走 base64 编译的阈值。默认是 `8192` 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。
## lessLoader
- 类型： `object` ### mock
- 默认值： `{}`
- 详情：
设置 [less-loader 配置项](https://github.com/webpack-contrib/less-loader)。 - 类型： `object || boolean`
- 默认值： `{}`
## mock - 详情：
- 类型： `object || boolean`
- 默认值： `{}`
- 详情：
配置 mock 属性。 配置 mock 属性。
- 当 mock 为 `boolean` 类型时，`true` 表示打开 mock，`false` 表示关闭 mock。 - 当 mock 为 `boolean` 类型时，`true` 表示打开 mock，`false` 表示关闭 mock。
- 当 mock 为 `object` 类型时，默认打开 mock。也可以通过子属性 `prefix` 添加过滤条件，满足条件的走 mock 文件。 - 当 mock 为 `object` 类型时，默认打开 mock。也可以通过子属性 `prefix` 添加过滤条件，满足条件的走 mock 文件。
- 示例：
- 示例：
```js ```js
export default { export default {
mock: { mock: {
prefix: '/api/auth' prefix: '/api/auth',
} },
} };
``` ```
然后所有以 `/api/users` 开始的请求，就能进入 mock.js 文件处理。 然后所有以 `/api/users` 开始的请求，就能进入 mock.js 文件处理。
## mountElementId ### mountElementId
- 类型： `string` - 类型： `string`
- 默认值： `app` - 默认值： `app`
- 详情： - 详情：
指定渲染到的 HTML 元素 id。 指定渲染到的 HTML 元素 id。
## nodeModulesTransform ### outputPath
- 类型： `object` - 类型： `string`
- 默认值： `{ exclude: [] }` - 默认值： `dist`
- 详情： - 详情：
默认编译所有 `node_modules` 下的包，可以通过配置 `exclude` 来跳过某些包，以提高编译速度。
## outputPath
- 类型： `string`
- 默认值： `dist`
- 详情：
指定输出路径。 指定输出路径。
@ -315,93 +155,90 @@ export default {
不允许设定为 `src`、`public`、`pages` 等约定目录。 不允许设定为 `src`、`public`、`pages` 等约定目录。
::: :::
## plugins ### plugins
- 类型： `Array(string)` - 类型： `Array(string)`
- 默认值： `[]` - 默认值： `[]`
- 详情： - 详情：
配置额外的 `fes` 插件。 配置额外的 `fes` 插件。
数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。 数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。
- 示例： - 示例：
```js ```js
export default { export default {
plugins: [ plugins: [
// npm 依赖 // npm 依赖
'fes-plugin-hello', 'fes-plugin-hello',
// 相对路径 // 相对路径
'./plugin', './plugin',
// 绝对路径 // 绝对路径
`${__dirname}/plugin.js`, `${__dirname}/plugin.js`,
], ],
}; };
``` ```
### proxy
## postcssLoader - 类型： `object`
- 默认值： `{}`
- 类型： `object` - 详情：
- 默认值： `{}`
- 详情：
设置 [postcss-loader 配置项](https://github.com/postcss/postcss-loader#options)。
## proxy
- 类型： `object`
- 默认值： `{}`
- 详情：
配置代理能力。 配置代理能力。
- 示例： - 示例：
```js ```js
export default { export default {
proxy: { proxy: {
'/v2': { '/v2': {
'target': 'https://api.douban.com/', target: 'https://api.douban.com/',
'changeOrigin': true, changeOrigin: true,
} },
} },
} };
``` ```
然后访问 `/v2/movie/in_theaters_proxy` 就能访问到 [http://api.douban.com/v2/movie/in_theaters_proxy](http://api.douban.com/v2/movie/in_theaters_proxy) 的数据。 然后访问 `/v2/movie/in_theaters_proxy` 就能访问到 [http://api.douban.com/v2/movie/in_theaters_proxy](http://api.douban.com/v2/movie/in_theaters_proxy) 的数据。
## publicPath ### publicPath
- 类型： `string` - 类型： `string`
- 默认值： `/` - 默认值： `/`
- 详情： - 详情：
配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。 配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。
## router ### router
- 类型： `object` - 类型： `object`
- 默认值： `{ mode: 'hash' }` - 默认值： `{ mode: 'hash' }`
- 详情： - 详情：
配置路由，具体请查看指南中关于路由的介绍 配置路由，具体请查看指南中关于路由的介绍
## singular ### singular
- 类型： `boolean`
- 默认值： `false` - 类型： `boolean`
- 详情： - 默认值： `false`
- 详情：
配置是否启用单数模式的目录。 比如 `src/pages` 的约定在开启后为 `src/page` 目录，@fesjs/fes-plugins 插件也遵照此配置的约定。 配置是否启用单数模式的目录。 比如 `src/pages` 的约定在开启后为 `src/page` 目录，@fesjs/fes-plugins 插件也遵照此配置的约定。
## targets ### targets
- 类型： `object`
- 默认值： `{}` - 类型： `object`
- 详情： - 默认值： `{}`
- 详情：
配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。 配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。
## terserOptions ### terserOptions
- 类型： `object`
- 默认值：
- 类型： `object`
- 默认值：
```js ```js
const defaultTerserOptions = { const defaultTerserOptions = {
compress: { compress: {
@ -433,24 +270,273 @@ const defaultTerserOptions = {
// required features to drop conditional branches // required features to drop conditional branches
conditionals: true, conditionals: true,
dead_code: true, dead_code: true,
evaluate: true evaluate: true,
}, },
mangle: { mangle: {
safari10: true safari10: true,
} },
} };
``` ```
- 详情：
- 详情：
配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options) 配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options)
## vueLoader ## webpack 构建专属配置
- 类型： `object`
- 默认值：`{}` ### analyze
- 详情：
- 类型： `object`
- 默认值：
```js
{
analyzerMode: process.env.ANALYZE_MODE || 'server',
analyzerPort: process.env.ANALYZE_PORT || 8888,
openAnalyzer: process.env.ANALYZE_OPEN !== 'none',
// generate stats file while ANALYZE_DUMP exist
generateStatsFile: !!process.env.ANALYZE_DUMP,
statsFilename: process.env.ANALYZE_DUMP || 'stats.json',
logLevel: process.env.ANALYZE_LOG_LEVEL || 'info',
defaultSizes: 'parsed' // stat // gzip
}
```
- 详情：
构建结果分析，当配置 `process.env.ANALYZE` 时开启，例如执行`ANALYZE=1 fes build`
### chainWebpack
- 类型：`function`
- 默认值：`null`
- 详情：
通过 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 的 API 修改 webpack 配置。
示例：
```js
export default {
chainWebpack(memo, { env, webpack }) {
// 删除 fes 内置插件
memo.plugins.delete('copy');
},
};
```
### cssLoader
- 类型： `object`
- 默认值： `''`
- 详情：
设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。
### copy
- 类型： `Array(string) || Array(object)`
- 默认值： `[]`
- 详情：
设置要复制到输出目录的文件、文件夹。
配置约定 `from-to` 规则， 其中 `from` 是相对于 `cwd` 的路径，`to` 是相对于输出路径的路径。
- 示例：
```js
export default {
copy: {
from: '/src/assets/images',
to: 'assets/images',
},
};
```
上面示例中，实现了将 `cwd` 路径中的 `/src/assets/images` 文件夹，在编译完成后，`copy` 到输出路径下的 `assets/images` 文件夹。
### devServer
- 类型： `object`
- 默认值： `{}`
- 详情：
配置开发服务器。支持以下子配置项：
- port，端口号，默认 `8000`
- host，默认 `localhost`
- https，是否启用 https server，同时也会开启 HTTP/2
启用 port 和 host 也可以通过环境变量 `PORT` 和 `HOST` 临时指定。
### devtool
- 类型： `string`
- 默认值： `cheap-module-source-map` in dev, `undefined` in build
- 详情：
用户配置 sourcemap 类型。详见 [ webpack#devtool 配置](https://webpack.js.org/configuration/devtool/#devtool)。
### exportStatic
- 类型： `object`
- 默认值： `{}`
- 详情：
配置 `html` 的输出形式，默认只输出 `index.html`。
如果开启 `exportStatic`，则会针对每个路由输出 `html` 文件。
比如以下路由，
```
/
/users
/list
```
不开启 `exportStatic` 时，输出，
```
- index.html
```
设置 `exportStatic: {}` 后，输出，
```
- index.html
- users.html
- list.html
```
### externals
- 类型：`object`
- 默认值：`{}`
- 详情：
设置哪些模块可以不被打包，通过 `<script>` 或其他方式引入。
示例：
```js
export default {
externals: {
vue: 'window.Vue',
},
};
```
### extraBabelPlugins
- 类型： `array`
- 默认值： `[]`
- 详情：
配置额外的 `babel` 插件。
- 示例：
```js
export default {
extraBabelPlugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]],
};
```
### extraBabelPresets
- 类型： `array`
- 默认值： `[]`
- 详情：
配置额外的 `babel` 插件集。
### extraPostCSSPlugins
- 类型： `array`
- 默认值： `[]`
- 详情：
设置额外的 [postcss 插件](https://github.com/postcss/postcss/blob/master/docs/plugins.md)。
### html
- 类型： `object`
- 默认值： `{}`
- 详情：
设置[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin#options)。
### lessLoader
- 类型： `object`
- 默认值： `{}`
- 详情：
设置 [less-loader 配置项](https://github.com/webpack-contrib/less-loader)。
### nodeModulesTransform
- 类型： `object`
- 默认值： `{ exclude: [] }`
- 详情：
默认编译所有 `node_modules` 下的包，可以通过配置 `exclude` 来跳过某些包，以提高编译速度。
### postcssLoader
- 类型： `object`
- 默认值： `{}`
- 详情：
设置 [postcss-loader 配置项](https://github.com/postcss/postcss-loader#options)。
### vueLoader
- 类型： `object`
- 默认值：`{}`
- 详情：
配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html) 配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html)
## Vite 专属配置
### viteOption
- 类型： `object`
- 详情：
Vite 的配置，详情请看 [Vite Config](https://cn.vitejs.dev/config/)
### viteVuePlugin
- 类型： `object`
- 详情：
自定义 [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) 的配置。
### viteVueJsx
- 类型： `object`
- 详情：
自定义 [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) 的配置。
### viteLegacy
- 类型： `object`
- 详情：
自定义 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 的配置。
### viteHtml
- 类型： `object`
- 详情：
自定义 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的配置。
## 更多配置项 ## 更多配置项
Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。
Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。

8
package.json
View File

@ -29,7 +29,7 @@
], ],
"dependencies": { "dependencies": {
"lerna": "^4.0.0", "lerna": "^4.0.0",
"vuepress": "2.0.0-beta.28" "vuepress": "^2.0.0-beta.37"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.15.0", "@babel/core": "^7.15.0",
@ -38,9 +38,9 @@
"@commitlint/config-conventional": "^11.0.0", "@commitlint/config-conventional": "^11.0.0",
"@fesjs/fes": "^2.0.0", "@fesjs/fes": "^2.0.0",
"@fesjs/plugin-jest": "^2.0.0", "@fesjs/plugin-jest": "^2.0.0",
"@vuepress/plugin-docsearch": "2.0.0-beta.28", "@vuepress/plugin-docsearch": "^2.0.0-beta.37",
"@vuepress/plugin-pwa": "2.0.0-beta.28", "@vuepress/plugin-pwa": "^2.0.0-beta.37",
"@vuepress/plugin-pwa-popup": "2.0.0-beta.28", "@vuepress/plugin-pwa-popup": "^2.0.0-beta.37",
"@webank/eslint-config-webank": "^1.2.0", "@webank/eslint-config-webank": "^1.2.0",
"chalk": "^4.1.2", "chalk": "^4.1.2",
"chokidar": "^3.5.2", "chokidar": "^3.5.2",

1
packages/fes-build-vite/src/commands/build/getBuildConfig.js
View File

@ -30,6 +30,7 @@ export default async (api) => {
], ],
build: { build: {
...build, ...build,
terserOptions: build.terserOptions || api.config.terserOptions,
target: build.target || 'es2015', target: build.target || 'es2015',
outDir: build.outDir || api.config.outputPath || 'dist', outDir: build.outDir || api.config.outputPath || 'dist',
assetsInlineLimit: build.assetsInlineLimit || api.config.inlineLimit || 8192, assetsInlineLimit: build.assetsInlineLimit || api.config.inlineLimit || 8192,

1
packages/fes-build-vite/src/common/getConfig.js
View File

@ -35,6 +35,7 @@ export function getInnerCommonConfig(api) {
], ],
resolve: { resolve: {
alias: { alias: {
...api.config.alias,
'@': api.paths.absSrcPath, '@': api.paths.absSrcPath,
'@@': api.paths.absTmpPath, '@@': api.paths.absTmpPath,
[api.builder.innerDepPrefix]: '/', [api.builder.innerDepPrefix]: '/',

780
yarn.lock
View File

File diff suppressed because it is too large Load Diff