refactor: 重新设计build加载方式

.gitignore

@@ -6,6 +6,7 @@
 .cache
 .temp
 .hound
+.fes
 dist
 *.log
 node_modules
@@ -14,7 +15,6 @@ npm-debug.log
 /packages/fes-doc/docs/.vuepress/dist
 /packages/fes-template/package-lock.json
 /.changelog
-
 /packages/*/lib
 /packages/*/es
 /packages/*/dist

build.config.js

@@ -3,6 +3,7 @@ module.exports = {
         'create-fes-app',
         'fes',
         'fes-compiler',
+        'fes-preset-built-in',
         'fes-build-vite',
         'fes-build-webpack',
         'fes-runtime',
@@ -20,7 +21,6 @@ module.exports = {
         'fes-plugin-sass',
         'fes-plugin-vuex',
         'fes-plugin-pinia',
-        'fes-preset-built-in',
         'fes-plugin-windicss',
     ],
     copy: [],

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

@@ -1,6 +1,7 @@
 export default function () {
     return {
         plugins: [
+            require.resolve('./registerBuilder'),
             require.resolve('./registerMethods'),
             require.resolve('./registerType'),
 

packages/fes-build-vite/src/registerBuilder.js

@@ -0,0 +1,5 @@
+export default function (api) {
+    api.registerBuilder({
+        name: 'vite',
+    });
+}

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

@@ -1,6 +1,8 @@
 export default function () {
     return {
         plugins: [
+            require.resolve('./plugins/registerBuilder'),
+
             // register methods
             require.resolve('./plugins/registerMethods'),
             require.resolve('./plugins/registerType'),

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

@@ -0,0 +1,5 @@
+export default function (api) {
+    api.registerBuilder({
+        name: 'webpack',
+    });
+}

packages/fes-compiler/src/service/index.js

@@ -9,7 +9,7 @@ import { AsyncSeriesWaterfallHook } from 'tapable';
 import { existsSync } from 'fs';
 import { lodash, chalk } from '@fesjs/utils';
 import { Command, Option } from 'commander';
-import { resolvePresets, filterBuilder, pathToObj, resolvePlugins } from './utils/pluginUtils';
+import { resolvePresets, pathToObj, resolvePlugins } from './utils/pluginUtils';
 import loadDotEnv from './utils/loadDotEnv';
 import isPromise from './utils/isPromise';
 import BabelRegister from './babelRegister';
@@ -38,6 +38,9 @@ export default class Service extends EventEmitter {
     // including plugins
     plugins = {};
 
+    // 构建
+    builder = {};
+
     // plugin methods
     pluginMethods = {};
 
@@ -89,11 +92,6 @@ export default class Service extends EventEmitter {
         this.env = opts.env || process.env.NODE_ENV;
         this.fesPkg = opts.fesPkg || {};
 
-        const builderPkgPath = filterBuilder(this.pkg);
-        this.builder = {
-            isVite: (builderPkgPath[0] || '').includes('build-vite'),
-        };
-
         assert(existsSync(this.cwd), `cwd ${this.cwd} does not exist.`);
 
         // register babel before config parsing

packages/fes-compiler/src/service/pluginAPI.js

@@ -21,21 +21,14 @@ export default class PluginAPI {
     }
 
     // TODO: reversed keys
-    describe({
+    describe({ id, key, config, enableBy } = {}) {
-        id,
-        key,
-        config,
-        enableBy
-    } = {}) {
         const { plugins } = this.service;
         // this.id and this.key is generated automatically
         // so we need to diff first
         if (id && this.id !== id) {
             if (plugins[id]) {
                 const name = plugins[id].isPreset ? 'preset' : 'plugin';
-                throw new Error(
+                throw new Error(`api.describe() failed, ${name} ${id} is already registered by ${plugins[id].path}.`);
-                    `api.describe() failed, ${name} ${id} is already registered by ${plugins[id].path}.`
-                );
             }
             plugins[id] = plugins[this.id];
             plugins[id].id = id;
@@ -55,54 +48,35 @@ export default class PluginAPI {
     }
 
     register(hook) {
-        assert(
+        assert(hook.key && typeof hook.key === 'string', `api.register() failed, hook.key must supplied and should be string, but got ${hook.key}.`);
-            hook.key && typeof hook.key === 'string',
+        assert(hook.fn && typeof hook.fn === 'function', `api.register() failed, hook.fn must supplied and should be function, but got ${hook.fn}.`);
-            `api.register() failed, hook.key must supplied and should be string, but got ${hook.key}.`
+        this.service.hooksByPluginId[this.id] = (this.service.hooksByPluginId[this.id] || []).concat(hook);
-        );
-        assert(
-            hook.fn && typeof hook.fn === 'function',
-            `api.register() failed, hook.fn must supplied and should be function, but got ${hook.fn}.`
-        );
-        this.service.hooksByPluginId[this.id] = (
-            this.service.hooksByPluginId[this.id] || []
-        ).concat(hook);
     }
 
     registerCommand(commandOption) {
         const { command, fn } = commandOption;
-        assert(
+        assert(!this.service.commands[command], `api.registerCommand() failed, the command ${command} is exists.`);
-            !this.service.commands[command],
+        assert(typeof command === 'string', 'api.registerCommand() failed, the command must be string.');
-            `api.registerCommand() failed, the command ${command} is exists.`
+        assert(typeof fn === 'function', 'api.registerCommand() failed, the fn must be function.');
-        );
-        assert(
-            typeof command === 'string',
-            'api.registerCommand() failed, the command must be String.'
-        );
-        assert(
-            typeof fn === 'function',
-            'api.registerCommand() failed, the fn must be function.'
-        );
         this.service.commands[command] = commandOption;
     }
 
     // 在 preset 初始化阶段放后面，在插件注册阶段放前面
     registerPlugins(plugins) {
         assert(
-            this.service.stage === ServiceStage.initPresets
+            this.service.stage === ServiceStage.initPresets || this.service.stage === ServiceStage.initPlugins,
-        || this.service.stage === ServiceStage.initPlugins,
+            'api.registerPlugins() failed, it should only be used in registering stage.',
-            'api.registerPlugins() failed, it should only be used in registering stage.'
         );
-        assert(
+        assert(Array.isArray(plugins), 'api.registerPlugins() failed, plugins must be Array.');
-            Array.isArray(plugins),
+        const extraPlugins = plugins.map((plugin) =>
-            'api.registerPlugins() failed, plugins must be Array.'
+            isValidPlugin(plugin)
+                ? plugin
+                : pathToObj({
+                      type: PluginType.plugin,
+                      path: plugin,
+                      cwd: this.service.cwd,
+                  }),
         );
-        const extraPlugins = plugins.map(plugin => (isValidPlugin(plugin)
-            ? (plugin)
-            : pathToObj({
-                type: PluginType.plugin,
-                path: plugin,
-                cwd: this.service.cwd
-            })));
         if (this.service.stage === ServiceStage.initPresets) {
             this.service._extraPlugins.push(...extraPlugins);
         } else {
@@ -111,50 +85,49 @@ export default class PluginAPI {
     }
 
     registerPresets(presets) {
-        assert(
+        assert(this.service.stage === ServiceStage.initPresets, 'api.registerPresets() failed, it should only used in presets.');
-            this.service.stage === ServiceStage.initPresets,
+        assert(Array.isArray(presets), 'api.registerPresets() failed, presets must be Array.');
-            'api.registerPresets() failed, it should only used in presets.'
+        const extraPresets = presets.map((preset) =>
+            isValidPlugin(preset)
+                ? preset
+                : pathToObj({
+                      type: PluginType.preset,
+                      path: preset,
+                      cwd: this.service.cwd,
+                  }),
         );
-        assert(
-            Array.isArray(presets),
-            'api.registerPresets() failed, presets must be Array.'
-        );
-        const extraPresets = presets.map(preset => (isValidPlugin(preset)
-            ? (preset)
-            : pathToObj({
-                type: PluginType.preset,
-                path: preset,
-                cwd: this.service.cwd
-            })));
         // 插到最前面，下个 while 循环优先执行
         this.service._extraPresets.splice(0, 0, ...extraPresets);
     }
 
-    registerMethod({
+    registerMethod({ name, fn, exitsError = true }) {
-        name,
-        fn,
-        exitsError = true
-    }) {
         if (this.service.pluginMethods[name]) {
             if (exitsError) {
-                throw new Error(
+                throw new Error(`api.registerMethod() failed, method ${name} is already exist.`);
-                    `api.registerMethod() failed, method ${name} is already exist.`
-                );
             } else {
                 return;
             }
         }
-        this.service.pluginMethods[name] = fn
+        this.service.pluginMethods[name] =
-      // 这里不能用 arrow function，this 需指向执行此方法的 PluginAPI
+            fn ||
-      // 否则 pluginId 会不会，导致不能正确 skip plugin
+            // 这里不能用 arrow function，this 需指向执行此方法的 PluginAPI
-      || function (hookFn) {
+            // 否则 pluginId 会不会，导致不能正确 skip plugin
-          const hook = {
+            function (hookFn) {
-              key: name,
+                const hook = {
-              ...(utils.lodash.isPlainObject(hookFn) ? hookFn : { fn: hookFn })
+                    key: name,
-          };
+                    ...(utils.lodash.isPlainObject(hookFn) ? hookFn : { fn: hookFn }),
-          // @ts-ignore
+                };
-          this.register(hook);
+                // @ts-ignore
-      };
+                this.register(hook);
+            };
+    }
+
+    registerBuilder(builder) {
+        assert(typeof builder === 'object', 'api.registerBuilder() failed, the builder must be object.');
+        const { name } = builder;
+        assert(typeof name === 'string', 'api.registerBuilder() failed, the builder.name must be string.');
+        assert(typeof this.service.builder.name !== 'string', `检测到您使用了 builder: ${name}，已经加载 builder: ${this.service.builder.name}， 请保留一个`);
+        this.service.builder = builder;
     }
 
     skipPlugins(pluginIds) {

packages/fes-compiler/src/service/utils/pluginUtils.js

@@ -1,14 +1,11 @@
 import { dirname, join, basename, relative, extname } from 'path';
 import { compatESModuleRequire, resolve, winPath, pkgUp, lodash } from '@fesjs/utils';
-import Logger from '../../logger';
 
 import { PluginType } from '../enums';
 
-const logger = new Logger('fes:compiler');
-
 const RE = {
     [PluginType.plugin]: /^(@fesjs\/|@webank\/fes-|fes-)plugin-/,
-    [PluginType.preset]: /^(@fesjs\/|@webank\/fes-|fes-)preset-/,
+    [PluginType.preset]: /^(@fesjs\/|@webank\/fes-|fes-)(preset|build)-/,
 };
 
 export function isPluginOrPreset(type, name) {
@@ -26,18 +23,6 @@ function filterPluginAndPreset(type, pkg) {
         .filter(isPluginOrPreset.bind(null, type));
 }
 
-export function filterBuilder(pkg) {
-    const builders = Object.keys(pkg.devDependencies || {})
-        .concat(Object.keys(pkg.dependencies || {}))
-        .filter((name) => /^@fesjs\/build-/.test(name));
-
-    if (builders.length > 1) {
-        logger.warn(`检测到您使用了多个个 builder: ${builders}，当前生效的是 ${builders[0]}, 请保留一个`);
-    }
-
-    return builders.slice(0, 1);
-}
-
 export function getPluginsOrPresets(type, opts) {
     const upperCaseType = type.toUpperCase();
     return [
@@ -46,8 +31,6 @@ export function getPluginsOrPresets(type, opts) {
         // env
         ...(process.env[`FES_${upperCaseType}S`] || '').split(',').filter(Boolean),
         ...filterPluginAndPreset(type, opts.pkg),
-        // 构建只允许是 presets
-        ...(type === PluginType.preset ? filterBuilder(opts.pkg) : []),
         // user config
         ...(opts[type === PluginType.preset ? 'userConfigPresets' : 'userConfigPlugins'] || []),
     ].map((path) =>
@@ -122,13 +105,29 @@ export function pathToObj({ path, type, cwd }) {
 export function resolvePresets(opts) {
     const type = PluginType.preset;
     const presets = [...getPluginsOrPresets(type, opts)];
-    return presets.map((path) =>
+    return presets
-        pathToObj({
+        .map((path) =>
-            type,
+            pathToObj({
-            path,
+                type,
-            cwd: opts.cwd,
+                path,
-        }),
+                cwd: opts.cwd,
-    );
+            }),
+        )
+        .sort((a, b) => {
+            if (a.id === '@fesjs/preset-built-in') {
+                return -1;
+            }
+            if (b.id === '@fesjs/preset-built-in') {
+                return 1;
+            }
+            if (/^(@fesjs\/|@webank\/fes-|fes-)build-/.test(a.id)) {
+                return -1;
+            }
+            if (/^(@fesjs\/|@webank\/fes-|fes-)build-/.test(b.id)) {
+                return 1;
+            }
+            return 0;
+        });
 }
 
 export function resolvePlugins(opts) {

packages/fes-plugin-monaco-editor/src/index.js

@@ -74,7 +74,7 @@ export default (api) => {
 
     api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
 
-    if (api.builder.isVite) {
+    if (api.builder.name === 'vite') {
         api.modifyBundleConfig((config) => {
             const monacoEditorPlugin = require('vite-plugin-monaco-editor').default;
             config?.plugins?.push(monacoEditorPlugin(api.config?.monacoEditor || {}));

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

@@ -19,7 +19,7 @@ export default function (api) {
         enableBy: () => isSlaveEnable(api),
     });
 
-    if (api.builder.isVite) {
+    if (api.builder.name === 'vite') {
         // 处理
     } else {
         api.modifyDefaultConfig((memo) => {

packages/fes-plugin-sass/src/index.js

@@ -17,7 +17,7 @@ export default (api) => {
         },
     });
 
-    if (api.builder.isVite) {
+    if (api.builder.name === 'vite') {
         // vite 不需要处理
     } else {
         api.chainWebpack((memo, { createCSSRule }) => {

packages/fes-plugin-windicss/src/index.js

@@ -61,7 +61,7 @@ export default (api) => {
 
     api.addEntryImportsAhead(() => [{ source: 'windi-base.css' }, { source: 'windi-components.css' }, { source: 'windi-utilities.css' }]);
 
-    if (api.builder.isVite) {
+    if (api.builder.name === 'vite') {
         buildWindicssWithVite(api);
     } else {
         buildWindicssWithWebpack(api);

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

@@ -24,6 +24,7 @@ export default function () {
             require.resolve('./plugins/features/mock'),
             require.resolve('./plugins/features/outputPath'),
             require.resolve('./plugins/features/plugins'),
+            require.resolve('./plugins/features/presets'),
             require.resolve('./plugins/features/proxy'),
             require.resolve('./plugins/features/publicPath'),
             require.resolve('./plugins/features/singular'),

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

@@ -0,0 +1,10 @@
+export default (api) => {
+    api.describe({
+        key: 'presets',
+        config: {
+            schema(joi) {
+                return joi.array().items(joi.string());
+            },
+        },
+    });
+};

packages/fes-preset-built-in/types.d.ts

@@ -77,6 +77,7 @@ export interface InnerBuildConfig {
     };
     mountElementId?: string;
     plugins?: string[];
+    presets?: string[];
     proxy?: {
         [apiPrefix: string]: {
             target: string;

packages/fes-template/.fes.js

@@ -91,5 +91,8 @@ export default {
     dynamicImport: true,
     monacoEditor: {
         languages: ['javascript', 'typescript', 'html', 'json']
-    }
+    },
+    presets: [
+        require.resolve('../fes-build-webpack/lib'),
+    ]
 };

packages/fes-template/package.json

@@ -58,7 +58,6 @@
     "@fesjs/plugin-windicss": "^2.0.0",
     "@fesjs/plugin-pinia": "^2.0.0",
     "@fesjs/fes-design": "^0.3.3",
-    "@fesjs/build-webpack": "^1.0.0",
     "vue": "^3.0.5",
     "vuex": "^4.0.0",
     "pinia": "^2.0.11"