From 955fc633ec5831fa69bdfbeda5ef6f0db1498fe9 Mon Sep 17 00:00:00 2001 From: wanchun <445436867@qq.com> Date: Tue, 4 Jan 2022 17:19:16 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/reference/config/README.md | 97 ++++++++++++++++++- docs/zh/reference/config/README.md | 97 ++++++++++++++++++- packages/fes-preset-built-in/src/index.js | 13 +-- .../plugins/commands/webpackConfig/html.js | 11 +-- .../src/plugins/features/babelPluginImport.js | 20 ---- .../src/plugins/features/devScripts.js | 14 --- .../src/plugins/registerMethods.js | 1 - 7 files changed, 194 insertions(+), 59 deletions(-) delete mode 100644 packages/fes-preset-built-in/src/plugins/features/babelPluginImport.js delete mode 100644 packages/fes-preset-built-in/src/plugins/features/devScripts.js diff --git a/docs/reference/config/README.md b/docs/reference/config/README.md index bcb22cbc..94ea35ca 100644 --- a/docs/reference/config/README.md +++ b/docs/reference/config/README.md @@ -24,6 +24,39 @@ export default { ``` 然后 `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 - 类型： `string` @@ -32,6 +65,9 @@ export default { 设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。 + + + ## chainWebpack - 类型：`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 - 类型：`object` @@ -151,7 +215,7 @@ export default { - 默认值： `[]` - 详情： - 配置额外的 babel 插件。 + 配置额外的 `babel` 插件。 - 示例： ```js @@ -162,6 +226,15 @@ export default { } ``` +## extraBabelPresets + +- 类型： `array` +- 默认值： `[]` +- 详情： + + 配置额外的 `babel` 插件集。 + + ## extraPostCSSPlugins - 类型： `array` @@ -170,6 +243,13 @@ export default { 设置额外的 [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` @@ -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) 的数据。 -## publicpath +## publicPath -- 类型： `publicPath` +- 类型： `string` - 默认值： `/` - 详情： @@ -300,7 +380,9 @@ export default { - 类型： `object` - 默认值： `{ mode: 'hash' }` -- 详情： 配置路由，具体请查看指南中关于路由的介绍 +- 详情： + + 配置路由，具体请查看指南中关于路由的介绍 ## singular - 类型： `boolean` @@ -361,3 +443,10 @@ const defaultTerserOptions = { - 详情： 配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options) + +## vueLoader +- 类型： `object` +- 默认值：`{}` +- 详情： + + 配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html) \ No newline at end of file diff --git a/docs/zh/reference/config/README.md b/docs/zh/reference/config/README.md index bcb22cbc..94ea35ca 100644 --- a/docs/zh/reference/config/README.md +++ b/docs/zh/reference/config/README.md @@ -24,6 +24,39 @@ export default { ``` 然后 `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 - 类型： `string` @@ -32,6 +65,9 @@ export default { 设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。 + + + ## chainWebpack - 类型：`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 - 类型：`object` @@ -151,7 +215,7 @@ export default { - 默认值： `[]` - 详情： - 配置额外的 babel 插件。 + 配置额外的 `babel` 插件。 - 示例： ```js @@ -162,6 +226,15 @@ export default { } ``` +## extraBabelPresets + +- 类型： `array` +- 默认值： `[]` +- 详情： + + 配置额外的 `babel` 插件集。 + + ## extraPostCSSPlugins - 类型： `array` @@ -170,6 +243,13 @@ export default { 设置额外的 [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` @@ -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) 的数据。 -## publicpath +## publicPath -- 类型： `publicPath` +- 类型： `string` - 默认值： `/` - 详情： @@ -300,7 +380,9 @@ export default { - 类型： `object` - 默认值： `{ mode: 'hash' }` -- 详情： 配置路由，具体请查看指南中关于路由的介绍 +- 详情： + + 配置路由，具体请查看指南中关于路由的介绍 ## singular - 类型： `boolean` @@ -361,3 +443,10 @@ const defaultTerserOptions = { - 详情： 配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options) + +## vueLoader +- 类型： `object` +- 默认值：`{}` +- 详情： + + 配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html) \ No newline at end of file diff --git a/packages/fes-preset-built-in/src/index.js b/packages/fes-preset-built-in/src/index.js index 61b10fc6..10e82558 100644 --- a/packages/fes-preset-built-in/src/index.js +++ b/packages/fes-preset-built-in/src/index.js @@ -15,15 +15,16 @@ export default function () { require.resolve('./plugins/features/analyze'), require.resolve('./plugins/features/autoprefixer'), require.resolve('./plugins/features/base'), - require.resolve('./plugins/features/babelPluginImport'), require.resolve('./plugins/features/chainWebpack'), require.resolve('./plugins/features/cssLoader'), require.resolve('./plugins/features/copy'), + require.resolve('./plugins/features/checkVuePackage'), require.resolve('./plugins/features/define'), - require.resolve('./plugins/features/devScripts'), require.resolve('./plugins/features/devServer'), require.resolve('./plugins/features/devtool'), + require.resolve('./plugins/features/dynamicImport'), require.resolve('./plugins/features/externals'), + require.resolve('./plugins/features/exportStatic'), require.resolve('./plugins/features/extraBabelPlugins'), require.resolve('./plugins/features/extraBabelPresets'), require.resolve('./plugins/features/extraPostCSSPlugins'), @@ -32,22 +33,18 @@ export default function () { require.resolve('./plugins/features/inlineLimit'), require.resolve('./plugins/features/lessLoader'), require.resolve('./plugins/features/mountElementId'), + require.resolve('./plugins/features/mock'), require.resolve('./plugins/features/outputPath'), require.resolve('./plugins/features/plugins'), require.resolve('./plugins/features/postcssLoader'), require.resolve('./plugins/features/proxy'), require.resolve('./plugins/features/publicPath'), + require.resolve('./plugins/features/runtimePublicPath'), require.resolve('./plugins/features/singular'), require.resolve('./plugins/features/targets'), require.resolve('./plugins/features/terserOptions'), require.resolve('./plugins/features/nodeModulesTransform'), 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 require.resolve('./plugins/misc/route'), diff --git a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js index aac0f7db..265c39e0 100644 --- a/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js +++ b/packages/fes-preset-built-in/src/plugins/commands/webpackConfig/html.js @@ -34,7 +34,6 @@ export default async function createHtmlWebpackConfig({ }); } - const multiPageConfig = config.html.pages; const htmlPath = join(cwd, 'public/index.html'); const defaultHtmlPath = resolve(__dirname, 'index-default.html'); const publicCopyIgnore = []; @@ -46,13 +45,9 @@ export default async function createHtmlWebpackConfig({ publicCopyIgnore.push(winPath(htmlOptions.template)); - if (!multiPageConfig) { - webpackConfig - .plugin('html') - .use(require.resolve('html-webpack-plugin'), [htmlOptions]); - } else { - // TODO 支持多页 - } + webpackConfig + .plugin('html') + .use(require.resolve('html-webpack-plugin'), [htmlOptions]); // 如果需要导出html，则根据路由生成对应的html文件 if (config.exportStatic) { diff --git a/packages/fes-preset-built-in/src/plugins/features/babelPluginImport.js b/packages/fes-preset-built-in/src/plugins/features/babelPluginImport.js deleted file mode 100644 index 76dfd763..00000000 --- a/packages/fes-preset-built-in/src/plugins/features/babelPluginImport.js +++ /dev/null @@ -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; - }); -}; diff --git a/packages/fes-preset-built-in/src/plugins/features/devScripts.js b/packages/fes-preset-built-in/src/plugins/features/devScripts.js deleted file mode 100644 index 8e5ccc6b..00000000 --- a/packages/fes-preset-built-in/src/plugins/features/devScripts.js +++ /dev/null @@ -1,14 +0,0 @@ - -export default (api) => { - api.describe({ - key: 'devScripts', - config: { - schema(joi) { - return joi.object(); - } - }, - enableBy() { - return api.env === 'development'; - } - }); -}; diff --git a/packages/fes-preset-built-in/src/plugins/registerMethods.js b/packages/fes-preset-built-in/src/plugins/registerMethods.js index 165c6faa..61ee2877 100644 --- a/packages/fes-preset-built-in/src/plugins/registerMethods.js +++ b/packages/fes-preset-built-in/src/plugins/registerMethods.js @@ -12,7 +12,6 @@ export default function (api) { 'addCoreExports', 'addRuntimePluginKey', 'addRuntimePlugin', - 'addDevScripts', 'addEntryImportsAhead', 'addEntryImports', 'addEntryCodeAhead',