refactor: 梳理构建配置

packages/fes-build-vite/types.d.ts

@@ -6,9 +6,9 @@ import {createHtmlPlugin} from 'vite-plugin-html'
 
 
 export interface ViteBuildConfig {
-    viteOption: UserConfig;
+    viteOption?: UserConfig;
-    viteVuePlugin: Options;
+    viteVuePlugin?: Options;
-    viteVueJsx: Parameters<typeof createPlugin>[0];
+    viteVueJsx?: Parameters<typeof createPlugin>[0];
-    viteLegacy: PolyfillOptions;
+    viteLegacy?: PolyfillOptions;
-    viteHtml: Parameters<typeof createHtmlPlugin>[0]
+    viteHtml?: Parameters<typeof createHtmlPlugin>[0]
 }

packages/fes-build-webpack/src/index.js

@@ -3,15 +3,13 @@ export default function () {
         plugins: [
             // register methods
             require.resolve('./plugins/registerMethods'),
+            require.resolve('./plugins/registerType'),
 
             // bundle configs
-            require.resolve('./plugins/features/alias'),
             require.resolve('./plugins/features/analyze'),
-            require.resolve('./plugins/features/autoprefixer'),
             require.resolve('./plugins/features/chainWebpack'),
             require.resolve('./plugins/features/cssLoader'),
             require.resolve('./plugins/features/copy'),
-            require.resolve('./plugins/features/define'),
             require.resolve('./plugins/features/devServer'),
             require.resolve('./plugins/features/devtool'),
             require.resolve('./plugins/features/externals'),
@@ -20,12 +18,8 @@ export default function () {
             require.resolve('./plugins/features/extraBabelPresets'),
             require.resolve('./plugins/features/extraPostCSSPlugins'),
             require.resolve('./plugins/features/html'),
-            require.resolve('./plugins/features/inlineLimit'),
             require.resolve('./plugins/features/lessLoader'),
-            require.resolve('./plugins/features/outputPath'),
             require.resolve('./plugins/features/postcssLoader'),
-            require.resolve('./plugins/features/publicPath'),
-            require.resolve('./plugins/features/terserOptions'),
             require.resolve('./plugins/features/nodeModulesTransform'),
             require.resolve('./plugins/features/vueLoader'),
 

packages/fes-build-webpack/src/plugins/commands/webpackConfig/index.js

@@ -38,6 +38,17 @@ function genTranspileDepRegex(exclude) {
     return deps.length ? new RegExp(deps.join('|')) : null;
 }
 
+function handleAlias({ api, webpackConfig }) {
+    const config = api.config;
+    if (config.alias) {
+        Object.keys(config.alias).forEach((key) => {
+            webpackConfig.resolve.alias.set(key, config.alias[key]);
+        });
+    }
+    webpackConfig.resolve.alias.set('@', api.paths.absSrcPath);
+    webpackConfig.resolve.alias.set('@@', api.paths.absTmpPath);
+}
+
 export default async function getConfig({ api, cwd, config, env, entry = {}, modifyBabelOpts, modifyBabelPresetOpts, chainWebpack, headScripts, publicPath }) {
     const isDev = env === 'development';
     const isProd = env === 'production';
@@ -68,11 +79,7 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
     // --------------- resolve -----------
     webpackConfig.resolve.extensions.merge(['.mjs', '.js', '.jsx', '.vue', '.ts', '.tsx', '.json', '.wasm']);
 
-    if (config.alias) {
+    handleAlias({ api, webpackConfig });
-        Object.keys(config.alias).forEach((key) => {
-            webpackConfig.resolve.alias.set(key, config.alias[key]);
-        });
-    }
 
     // --------------- module -----------
     webpackConfig.module

packages/fes-build-webpack/src/plugins/features/alias.js

@@ -1,21 +0,0 @@
-export default (api) => {
-    const { paths } = api;
-
-    api.describe({
-        key: 'alias',
-        config: {
-            schema(joi) {
-                return joi.object();
-            },
-            default: {},
-        },
-    });
-
-    api.chainWebpack(async (memo) => {
-        // 选择在 chainWebpack 中进行以上 alias 的初始化，是为了支持用户使用 modifyPaths API 对 paths 进行改写
-        memo.resolve.alias.set('@', paths.absSrcPath);
-        memo.resolve.alias.set('@@', paths.absTmpPath);
-
-        return memo;
-    });
-};

packages/fes-build-webpack/src/plugins/registerType.js

@@ -0,0 +1,8 @@
+import { name } from '../package.json';
+
+export default function (api) {
+    api.addConfigType(() => ({
+        source: name,
+        build: ['WebpackBuildConfig'],
+    }));
+}

packages/fes-build-webpack/types.d.ts

@@ -1,5 +1,57 @@
+import Config from 'webpack-chain'
+import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin'
 
+interface CopyFileType {
+    from: string;
+    to: string;
+}
 
 export interface WebpackBuildConfig {
+    analyze?: {
+        analyzerMode?: 'server' | 'static' | 'disabled';
+        analyzerHost?: string;
+        analyzerPort?: number | 'auto';
+        openAnalyzer?: boolean;
+        generateStatsFile?:  boolean;
+        statsFilename?: string;
+        logLevel?: 'info' | 'warn' | 'error' | 'silent';
+        defaultSizes?: 'stat' | 'parsed' | 'gzip'
+    };
+    chainWebpack?: (memo: Config, args: {env: string, webpack: typeof webpack}) => void;
+    copy?: CopyFileType | CopyFileType[];
+    cssLoader?: {
+        url?: boolean | ((url: string, resourcePath: string) => boolean);
+        import?: boolean | ({ filter: (url: string, media: string, resourcePath: string) => boolean });
+        modules?: boolean | string | object;
+        sourceMap?: boolean;
+        importLoaders?: number;
+        onlyLocals?: boolean;
+        esModule?: boolean;
+        localsConvention?: 'asIs' | 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly';
+    };
+    devServer?: {
+        port?: number;
+        host?: string;
+        https?: boolean;
+        headers?: object;
+        [key: string]: any;
+    };
+    devtool?: string;
+    exportStatic?: {
+        htmlSuffix?: boolean;
+        dynamicRoot?: boolean;
+    };
+    externals?: object | string | Function;
+    extraBabelPlugins?: [];
+    extraBabelPresets?: [];
+    extraPostCSSPlugins?: [];
+    html?: HtmlWebpackPlugin.Options;
+    lessLoader?: Record<string, any>;
+    nodeModulesTransform?: {
+        exclude: string[]
+    };
+    postcssLoader?: Record<string, any>;
+    vueLoader?: object;
 
 }

packages/fes-plugin-qiankun/src/main/index.js

@@ -57,7 +57,7 @@ export default function (api) {
 
         const { main: options } = api.config?.qiankun || {};
         const masterHistoryType = api.config?.router?.mode || defaultHistoryType;
-        const base = api.config.base;
+        const base = api.config.router?.base;
         api.writeTmpFile({
             path: absMasterOptionsPath,
             content: `

packages/fes-plugin-qiankun/src/micro/index.js

@@ -36,7 +36,7 @@ export default function (api) {
 
         const shouldNotModifyDefaultBase = api.userConfig.qiankun?.slave?.shouldNotModifyDefaultBase ?? initialMicroOptions.shouldNotModifyDefaultBase;
         if (!shouldNotModifyDefaultBase) {
-            modifiedDefaultConfig.base = `/${api.pkg.name}`;
+            modifiedDefaultConfig.router.base = `/${api.pkg.name}`;
         }
 
         return modifiedDefaultConfig;

packages/fes-preset-built-in/src/index.js

@@ -12,16 +12,22 @@ export default function () {
             require.resolve('./plugins/generateFiles/genType'),
 
             // bundle configs
-            require.resolve('./plugins/features/base'),
+            require.resolve('./plugins/features/alias'),
+            require.resolve('./plugins/features/autoprefixer'),
             require.resolve('./plugins/features/checkVuePackage'),
+            require.resolve('./plugins/features/define'),
             require.resolve('./plugins/features/dynamicImport'),
             require.resolve('./plugins/features/globalCSS'),
+            require.resolve('./plugins/features/inlineLimit'),
             require.resolve('./plugins/features/mountElementId'),
             require.resolve('./plugins/features/mock'),
+            require.resolve('./plugins/features/outputPath'),
             require.resolve('./plugins/features/plugins'),
             require.resolve('./plugins/features/proxy'),
+            require.resolve('./plugins/features/publicPath'),
             require.resolve('./plugins/features/singular'),
             require.resolve('./plugins/features/targets'),
+            require.resolve('./plugins/features/terserOptions'),
 
             // route
             require.resolve('./plugins/route'),

packages/fes-preset-built-in/src/plugins/features/alias.js

@@ -1,11 +1,11 @@
 export default (api) => {
     api.describe({
-        key: 'base',
+        key: 'alias',
         config: {
-            default: '',
             schema(joi) {
-                return joi.string().allow('');
+                return joi.object();
             },
+            default: {},
         },
     });
 };

packages/fes-preset-built-in/src/plugins/route/index.js

@@ -263,6 +263,7 @@ export default function (api) {
         config: {
             schema(joi) {
                 return joi.object({
+                    base: joi.string(),
                     routes: joi.array(),
                     mode: joi.string(),
                 });
@@ -328,7 +329,7 @@ export default function (api) {
             content: Mustache.render(routeExportsTpl, {
                 runtimePath,
                 config: api.config,
-                routerBase: api.config.base,
+                routerBase: api.config.router?.base,
                 CREATE_HISTORY: historyType[api.config.router.mode] || 'createWebHashHistory',
             }),
         });

packages/fes/types.d.ts

@@ -47,20 +47,66 @@ export function defineRuntimeConfig(config: InnerRuntimeConfig & PluginRuntimeCo
 
 
 interface InnerBuildConfig {
-    base: string;
+    alias?: Record<string, string>,
-    dynamicImport: boolean;
+    autoprefixer?: {
-    mock: boolean | {
+        /** environment for `Browserslist` */
-        prefix: string;
+        env?: string
+    
+        /** should Autoprefixer use Visual Cascade, if CSS is uncompressed */
+        cascade?: boolean
+    
+        /** should Autoprefixer add prefixes. */
+        add?: boolean
+    
+        /** should Autoprefixer [remove outdated] prefixes */
+        remove?: boolean
+    
+        /** should Autoprefixer add prefixes for @supports parameters. */
+        supports?: boolean
+    
+        /** should Autoprefixer add prefixes for flexbox properties */
+        flexbox?: boolean | 'no-2009'
+    
+        /** should Autoprefixer add IE 10-11 prefixes for Grid Layout properties */
+        grid?: boolean | GridValue
+    
+        /** custom usage statistics for > 10% in my stats browsers query */
+        stats?: Stats
+    
+        /**
+         * list of queries for target browsers.
+         * Try to not use it.
+         * The best practice is to use `.browserslistrc` config or `browserslist` key in `package.json`
+         * to share target browsers with Babel, ESLint and Stylelint
+         */
+        overrideBrowserslist?: string | string[]
+    
+        /** do not raise error on unknown browser version in `Browserslist` config. */
+        ignoreUnknownVersions?: boolean
     };
-    mountElementId: string;
+    define?: Record<string, string | object>,
-    plugins: string[];
+    router?: {
-    proxy: {
+        base?: string;
+        routes?: RouteRecordRaw[];
+        mode?: 'hash' | 'history' | 'memory'
+    };
+    dynamicImport?: boolean;
+    inlineLimit?: number;
+    mock?: boolean | {
+        prefix?: string;
+    };
+    mountElementId?: string;
+    plugins?: string[];
+    proxy?: {
         [apiPrefix: string]: {
             target: string;
             changeOrigin?: boolean;
         }
     };
-    singular: boolean;
+    publicPath?: string;
+    singular?: boolean;
+    targets?: object;
+    terserOptions?: object;
 }
 
 export function defineBuildConfig(config: InnerBuildConfig & PluginBuildConfig ): InnerBuildConfig & PluginBuildConfig;