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:
wanchun 2022-01-04 17:19:16 +08:00
parent 700b0f9747
commit 955fc633ec
7 changed files with 194 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,39 @@ export default {
``` ```
然后 `import('main')`，实际上是 `import('src/assets/styles/main')`。 然后 `import('main')`，实际上是 `import('src/assets/styles/main')`。
## 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`
## autoprefixer
- 类型： `object`
- 默认值：
```js
{
flexbox: 'no-2009'
}
```
- 详情：
[postcss autoprefixer 插件](https://github.com/postcss/autoprefixer#options) 配置。
## base ## base
- 类型： `string` - 类型： `string`
@ -32,6 +65,9 @@ export default {
设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。 设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。
## chainWebpack ## chainWebpack
- 类型：`function` - 类型：`function`
@ -126,6 +162,34 @@ export default {
- 详情： - 详情：
路由是否按需加载 路由是否按需加载
## exportStatic
- 类型： `object`
- 默认值： `{}`
- 详情：
配置 `html` 的输出形式，默认只输出 `index.html`。
如果开启 `exportStatic`，则会针对每个路由输出 `html` 文件。
比如以下路由，
```
/
/users
/list
```
不开启 `exportStatic` 时，输出，
```
- index.html
```
设置 `exportStatic: {}` 后，输出，
```
- index.html
- users.html
- list.html
```
## externals ## externals
- 类型：`object` - 类型：`object`
@ -151,7 +215,7 @@ export default {
- 默认值： `[]` - 默认值： `[]`
- 详情： - 详情：
配置额外的 babel 插件。 配置额外的 `babel` 插件。
- 示例： - 示例：
```js ```js
@ -162,6 +226,15 @@ export default {
} }
``` ```
## extraBabelPresets
- 类型： `array`
- 默认值： `[]`
- 详情：
配置额外的 `babel` 插件集。
## extraPostCSSPlugins ## extraPostCSSPlugins
- 类型： `array` - 类型： `array`
@ -170,6 +243,13 @@ export default {
设置额外的 [postcss 插件](https://github.com/postcss/postcss/blob/master/docs/plugins.md)。 设置额外的 [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 ## inlineLimit
- 类型： `number` - 类型： `number`
@ -288,9 +368,9 @@ export default {
``` ```
然后访问 `/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
- 类型： `publicPath` - 类型： `string`
- 默认值： `/` - 默认值： `/`
- 详情： - 详情：
@ -300,7 +380,9 @@ export default {
- 类型： `object` - 类型： `object`
- 默认值： `{ mode: 'hash' }` - 默认值： `{ mode: 'hash' }`
- 详情： 配置路由，具体请查看指南中关于路由的介绍 - 详情：
配置路由，具体请查看指南中关于路由的介绍
## singular ## singular
- 类型： `boolean` - 类型： `boolean`
@ -361,3 +443,10 @@ const defaultTerserOptions = {
- 详情： - 详情：
配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options) 配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options)
## vueLoader
- 类型： `object`
- 默认值：`{}`
- 详情：
配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html)

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

@ -24,6 +24,39 @@ export default {
``` ```
然后 `import('main')`，实际上是 `import('src/assets/styles/main')`。 然后 `import('main')`，实际上是 `import('src/assets/styles/main')`。
## 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`
## autoprefixer
- 类型： `object`
- 默认值：
```js
{
flexbox: 'no-2009'
}
```
- 详情：
[postcss autoprefixer 插件](https://github.com/postcss/autoprefixer#options) 配置。
## base ## base
- 类型： `string` - 类型： `string`
@ -32,6 +65,9 @@ export default {
设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。 设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。
## chainWebpack ## chainWebpack
- 类型：`function` - 类型：`function`
@ -126,6 +162,34 @@ export default {
- 详情： - 详情：
路由是否按需加载 路由是否按需加载
## exportStatic
- 类型： `object`
- 默认值： `{}`
- 详情：
配置 `html` 的输出形式，默认只输出 `index.html`。
如果开启 `exportStatic`，则会针对每个路由输出 `html` 文件。
比如以下路由，
```
/
/users
/list
```
不开启 `exportStatic` 时，输出，
```
- index.html
```
设置 `exportStatic: {}` 后，输出，
```
- index.html
- users.html
- list.html
```
## externals ## externals
- 类型：`object` - 类型：`object`
@ -151,7 +215,7 @@ export default {
- 默认值： `[]` - 默认值： `[]`
- 详情： - 详情：
配置额外的 babel 插件。 配置额外的 `babel` 插件。
- 示例： - 示例：
```js ```js
@ -162,6 +226,15 @@ export default {
} }
``` ```
## extraBabelPresets
- 类型： `array`
- 默认值： `[]`
- 详情：
配置额外的 `babel` 插件集。
## extraPostCSSPlugins ## extraPostCSSPlugins
- 类型： `array` - 类型： `array`
@ -170,6 +243,13 @@ export default {
设置额外的 [postcss 插件](https://github.com/postcss/postcss/blob/master/docs/plugins.md)。 设置额外的 [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 ## inlineLimit
- 类型： `number` - 类型： `number`
@ -288,9 +368,9 @@ export default {
``` ```
然后访问 `/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
- 类型： `publicPath` - 类型： `string`
- 默认值： `/` - 默认值： `/`
- 详情： - 详情：
@ -300,7 +380,9 @@ export default {
- 类型： `object` - 类型： `object`
- 默认值： `{ mode: 'hash' }` - 默认值： `{ mode: 'hash' }`
- 详情： 配置路由，具体请查看指南中关于路由的介绍 - 详情：
配置路由，具体请查看指南中关于路由的介绍
## singular ## singular
- 类型： `boolean` - 类型： `boolean`
@ -361,3 +443,10 @@ const defaultTerserOptions = {
- 详情： - 详情：
配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options) 配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options)
## vueLoader
- 类型： `object`
- 默认值：`{}`
- 详情：
配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html)

13
packages/fes-preset-built-in/src/index.js
View File

@ -15,15 +15,16 @@ export default function () {
require.resolve('./plugins/features/analyze'), require.resolve('./plugins/features/analyze'),
require.resolve('./plugins/features/autoprefixer'), require.resolve('./plugins/features/autoprefixer'),
require.resolve('./plugins/features/base'), require.resolve('./plugins/features/base'),
require.resolve('./plugins/features/babelPluginImport'),
require.resolve('./plugins/features/chainWebpack'), require.resolve('./plugins/features/chainWebpack'),
require.resolve('./plugins/features/cssLoader'), require.resolve('./plugins/features/cssLoader'),
require.resolve('./plugins/features/copy'), require.resolve('./plugins/features/copy'),
require.resolve('./plugins/features/checkVuePackage'),
require.resolve('./plugins/features/define'), require.resolve('./plugins/features/define'),
require.resolve('./plugins/features/devScripts'),
require.resolve('./plugins/features/devServer'), require.resolve('./plugins/features/devServer'),
require.resolve('./plugins/features/devtool'), require.resolve('./plugins/features/devtool'),
require.resolve('./plugins/features/dynamicImport'),
require.resolve('./plugins/features/externals'), require.resolve('./plugins/features/externals'),
require.resolve('./plugins/features/exportStatic'),
require.resolve('./plugins/features/extraBabelPlugins'), require.resolve('./plugins/features/extraBabelPlugins'),
require.resolve('./plugins/features/extraBabelPresets'), require.resolve('./plugins/features/extraBabelPresets'),
require.resolve('./plugins/features/extraPostCSSPlugins'), require.resolve('./plugins/features/extraPostCSSPlugins'),
@ -32,22 +33,18 @@ export default function () {
require.resolve('./plugins/features/inlineLimit'), require.resolve('./plugins/features/inlineLimit'),
require.resolve('./plugins/features/lessLoader'), require.resolve('./plugins/features/lessLoader'),
require.resolve('./plugins/features/mountElementId'), require.resolve('./plugins/features/mountElementId'),
require.resolve('./plugins/features/mock'),
require.resolve('./plugins/features/outputPath'), require.resolve('./plugins/features/outputPath'),
require.resolve('./plugins/features/plugins'), require.resolve('./plugins/features/plugins'),
require.resolve('./plugins/features/postcssLoader'), require.resolve('./plugins/features/postcssLoader'),
require.resolve('./plugins/features/proxy'), require.resolve('./plugins/features/proxy'),
require.resolve('./plugins/features/publicPath'), require.resolve('./plugins/features/publicPath'),
require.resolve('./plugins/features/runtimePublicPath'),
require.resolve('./plugins/features/singular'), require.resolve('./plugins/features/singular'),
require.resolve('./plugins/features/targets'), require.resolve('./plugins/features/targets'),
require.resolve('./plugins/features/terserOptions'), require.resolve('./plugins/features/terserOptions'),
require.resolve('./plugins/features/nodeModulesTransform'), require.resolve('./plugins/features/nodeModulesTransform'),
require.resolve('./plugins/features/vueLoader'), require.resolve('./plugins/features/vueLoader'),
require.resolve('./plugins/features/mock'),
require.resolve('./plugins/features/dynamicImport'),
require.resolve('./plugins/features/runtimePublicPath'),
require.resolve('./plugins/features/exportStatic'),
require.resolve('./plugins/features/checkVuePackage'),
// misc // misc
require.resolve('./plugins/misc/route'), require.resolve('./plugins/misc/route'),

5
packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js
View File

@ -34,7 +34,6 @@ export default async function createHtmlWebpackConfig({
}); });
} }
const multiPageConfig = config.html.pages;
const htmlPath = join(cwd, 'public/index.html'); const htmlPath = join(cwd, 'public/index.html');
const defaultHtmlPath = resolve(__dirname, 'index-default.html'); const defaultHtmlPath = resolve(__dirname, 'index-default.html');
const publicCopyIgnore = []; const publicCopyIgnore = [];
@ -46,13 +45,9 @@ export default async function createHtmlWebpackConfig({
publicCopyIgnore.push(winPath(htmlOptions.template)); publicCopyIgnore.push(winPath(htmlOptions.template));
if (!multiPageConfig) {
webpackConfig webpackConfig
.plugin('html') .plugin('html')
.use(require.resolve('html-webpack-plugin'), [htmlOptions]); .use(require.resolve('html-webpack-plugin'), [htmlOptions]);
} else {
// TODO 支持多页
}
// 如果需要导出html，则根据路由生成对应的html文件 // 如果需要导出html，则根据路由生成对应的html文件
if (config.exportStatic) { if (config.exportStatic) {

20
packages/fes-preset-built-in/src/plugins/features/babelPluginImport.js
View File

@ -1,20 +0,0 @@
export default (api) => {
api.describe({
key: 'babelPluginImport',
config: {
schema(joi) {
return joi.array();
}
}
});
api.modifyBabelOpts((babelOpts) => {
if (api.config.babelPluginImport) {
api.config.babelPluginImport.forEach((config) => {
babelOpts.plugins.push(['import', config]);
});
}
return babelOpts;
});
};

14
packages/fes-preset-built-in/src/plugins/features/devScripts.js
View File

@ -1,14 +0,0 @@
export default (api) => {
api.describe({
key: 'devScripts',
config: {
schema(joi) {
return joi.object();
}
},
enableBy() {
return api.env === 'development';
}
});
};

1
packages/fes-preset-built-in/src/plugins/registerMethods.js
View File

@ -12,7 +12,6 @@ export default function (api) {
'addCoreExports', 'addCoreExports',
'addRuntimePluginKey', 'addRuntimePluginKey',
'addRuntimePlugin', 'addRuntimePlugin',
'addDevScripts',
'addEntryImportsAhead', 'addEntryImportsAhead',
'addEntryImports', 'addEntryImports',
'addEntryCodeAhead', 'addEntryCodeAhead',