feat: 优化 webpack 信息输出

packages/fes-builder-webpack/package.json

@@ -33,7 +33,6 @@
     "@babel/plugin-transform-runtime": "^7.16.4",
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-typescript": "^7.15.0",
-    "@fesjs/compiler": "^2.0.5",
     "@fesjs/utils": "^2.0.4",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "autoprefixer": "^10.2.4",
@@ -59,7 +58,8 @@
     "webpack": "^5.69.0",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-chain": "^6.5.1",
-    "webpack-dev-server": "^4.8.1"
+    "webpack-dev-server": "^4.8.1",
+    "webpackbar": "^5.0.2"
   },
   "peerDependencies": {
     "@vue/compiler-sfc": "^3.0.5",

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

@@ -5,14 +5,11 @@
 
 import { relative } from 'path';
 import { existsSync } from 'fs';
-import { Logger } from '@fesjs/compiler';
-
-const logger = new Logger('fes:builder-webpack');
 
 export default function (api) {
     const {
         paths,
-        utils: { rimraf },
+        utils: { rimraf, logger },
     } = api;
 
     api.registerCommand({
@@ -38,7 +35,7 @@ export default function (api) {
                 // clear output path before exec build
                 if (process.env.CLEAR_OUTPUT !== 'none') {
                     if (paths.absOutputPath && existsSync(paths.absOutputPath)) {
-                        logger.debug(`Clear OutputPath: ${paths.absNodeModulesPath}`);
+                        logger.info(`Clear OutputPath: ${paths.absOutputPath}`);
                         rimraf.sync(paths.absOutputPath);
                     }
                 }

packages/fes-builder-webpack/src/plugins/commands/dev/devServer.js

@@ -1,5 +1,6 @@
 import WebpackDevServer from 'webpack-dev-server';
 import webpack from 'webpack';
+import { chalk } from '@fesjs/utils';
 
 export function startDevServer({ webpackConfig, host, port, proxy, https, beforeMiddlewares, afterMiddlewares, customerDevServerConfig }) {
     const options = {
@@ -13,9 +14,6 @@ export function startDevServer({ webpackConfig, host, port, proxy, https, before
                 port,
             },
         },
-        devMiddleware: {
-            stats: 'errors-only',
-        },
         setupMiddlewares(middlewares) {
             middlewares.unshift(...beforeMiddlewares);
             middlewares.push(...afterMiddlewares);
@@ -33,6 +31,7 @@ export function startDevServer({ webpackConfig, host, port, proxy, https, before
     const compiler = webpack(webpackConfig);
     const server = new WebpackDevServer(options, compiler);
 
+    console.log(chalk.green('Server: '), chalk.blue(`${options.server}://${options.host}:${options.port}`));
     server.startCallback((err) => {
         if (err) {
             console.error(err);

packages/fes-builder-webpack/src/plugins/commands/dev/index.js

@@ -1,11 +1,7 @@
-import { Logger } from '@fesjs/compiler';
-
-const logger = new Logger('fes:builder-webpack');
-
 export default (api) => {
     const {
         paths,
-        utils: { chalk, getPort, getHostName, changePort },
+        utils: { chalk, getPort, getHostName, changePort, logger },
     } = api;
 
     let port;

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

@@ -56,7 +56,7 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
     const absoluteOutput = join(cwd, config.outputPath || 'dist');
 
     webpackConfig.mode(env);
-    webpackConfig.stats('verbose');
+    webpackConfig.stats('errors-only');
     webpackConfig.externals(config.externals || {});
     webpackConfig.devtool(isDev ? config.devtool || 'cheap-module-source-map' : config.devtool);
 
@@ -226,6 +226,8 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
         ]);
     }
 
+    webpackConfig.plugin('progress').use(require.resolve(require.resolve('webpackbar')));
+
     // --------------- define -----------
     createDefineWebpackConfig({
         config,
@@ -279,6 +281,7 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
 
     const memo = webpackConfig.toConfig();
     memo.infrastructureLogging = {
+        level: 'error',
         ...memo.infrastructureLogging,
     };
     memo.output = {

packages/fes-compiler/src/index.js

@@ -3,19 +3,10 @@
  * https://github.com/umijs/umi/tree/master/packages/core
  */
 
-
 import Config from './config';
-import Logger from './logger';
 import Service from './service';
 import PluginAPI from './service/pluginAPI';
 import { PluginType } from './service/enums';
 import { isPluginOrPreset } from './service/utils/pluginUtils';
 
-export {
+export { Config, Service, PluginAPI, isPluginOrPreset, PluginType };
-    Config,
-    Service,
-    PluginAPI,
-    isPluginOrPreset,
-    PluginType,
-    Logger
-};

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

@@ -1,86 +0,0 @@
-/**
- * @copy 该文件代码大部分出自 umi，有需要请参考：
- * https://github.com/umijs/umi/tree/master/packages/core
- */
-
-import { createDebug, chalk } from '@fesjs/utils';
-import readline from 'readline';
-
-export default class Logger {
-    LOG = chalk.black.bgBlue('LOG');
-
-    INFO = chalk.black.bgBlue('INFO');
-
-    WARN = chalk.black.bgHex('#faad14')('WARN');
-
-    ERROR = chalk.black.bgRed('ERROR');
-
-    PROFILE = chalk.black.bgCyan('PROFILE');
-
-    constructor(namespace) {
-        // TODO: get namespace filename accounding caller function
-        if (!namespace) {
-            throw new Error('logger needs namespace');
-        }
-        this.namespace = namespace;
-        this.profilers = {};
-        this.debug = createDebug(this.namespace);
-    }
-
-    log(...args) {
-        // TODO: node env production
-        console.log(this.LOG, ...args);
-    }
-
-    /**
-     * The {@link logger.info} function is an alias for {@link logger.log()}.
-     * @param args
-     */
-    info(...args) {
-        console.log(this.INFO, ...args);
-    }
-
-    error(...args) {
-        console.error(this.ERROR, ...args);
-    }
-
-    warn(...args) {
-        console.warn(this.WARN, ...args);
-    }
-
-    formatTiming(timing) {
-        return timing < 60 * 1000 ? `${Math.round(timing / 10) / 100}s` : `${Math.round(timing / 600) / 100}m`;
-    }
-
-    profile(id, message) {
-        const time = Date.now();
-        const namespace = `${this.namespace}:${id}`;
-        // for test
-        let msg;
-        if (this.profilers[id]) {
-            const timeEnd = this.profilers[id];
-            delete this.profilers[id];
-            process.stderr.write(`${this.PROFILE} `);
-            msg = `${this.PROFILE} ${chalk.cyan(`└ ${namespace}`)} Completed in ${this.formatTiming(time - timeEnd)}`;
-            console.log(msg);
-        } else {
-            msg = `${this.PROFILE} ${chalk.cyan(`┌ ${namespace}`)} ${message || ''}`;
-            console.log(msg);
-        }
-
-        this.profilers[id] = time;
-        return msg;
-    }
-
-    clearConsole(title) {
-        if (process.stdout.isTTY) {
-            const blank = '\n'.repeat(process.stdout.rows);
-            console.log(blank);
-            readline.cursorTo(process.stdout, 0, 0);
-            readline.clearScreenDown(process.stdout);
-            if (title) {
-                console.log(title);
-            }
-        }
-    }
-}

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

@@ -21,7 +21,6 @@ import getPaths from './getPaths';
 
 // TODO
 // 1. duplicated key
-// 2. Logger
 export default class Service extends EventEmitter {
     cwd;
 

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

@@ -7,7 +7,6 @@ import assert from 'assert';
 import * as utils from '@fesjs/utils';
 import { isValidPlugin, pathToObj } from './utils/pluginUtils';
 import { EnableBy, PluginType, ServiceStage } from './enums';
-import Logger from '../logger';
 
 // TODO
 // 标准化 logger
@@ -17,7 +16,7 @@ export default class PluginAPI {
         this.key = opts.key;
         this.service = opts.service;
         this.utils = utils;
-        this.logger = new Logger(`fes:plugin:${this.id || this.key}`);
+        this.logger = utils.logger;
     }
 
     // TODO: reversed keys

packages/fes-plugin-jest/package.json

@@ -31,7 +31,6 @@
   },
   "dependencies": {
     "@babel/preset-env": "^7.15.0",
-    "@fesjs/compiler": "^2.0.5",
     "@vue/babel-plugin-jsx": "^1.0.6",
     "babel-jest": "^27.0.6",
     "jest": "^27.0.6",

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

@@ -1,13 +1,10 @@
 import assert from 'assert';
 import { join } from 'path';
 import { existsSync } from 'fs';
-import { Logger } from '@fesjs/compiler';
 // jest-cli 不在暴露 options，维护一份本地的 options
 import { options as CliOptions } from './jestArgs';
 import createDefaultConfig from './createDefaultConfig';
 
-const logger = new Logger('fes:plugin-unit-jest');
-
 function getCommandOptiton() {
     const opts = [];
     Object.keys(CliOptions).forEach((key) => {
@@ -28,7 +25,7 @@ function getCommandOptiton() {
 
 export default function (api) {
     const {
-        utils: { mergeConfig },
+        utils: { mergeConfig, logger },
         cwd,
     } = api;
 
@@ -43,22 +40,22 @@ export default function (api) {
                 args._.shift();
             }
 
-            args.debug && logger.log(`args: ${JSON.stringify(args)}`);
+            args.debug && logger.info(`args: ${JSON.stringify(args)}`);
 
             // Read config from cwd/jest.config.js
             const userJestConfigFile = join(cwd, 'jest.config.js');
             const userJestConfig = existsSync(userJestConfigFile) && require(userJestConfigFile);
-            args.debug && logger.log(`config from jest.config.js: ${JSON.stringify(userJestConfig)}`);
+            args.debug && logger.info(`config from jest.config.js: ${JSON.stringify(userJestConfig)}`);
 
             // Read jest config from package.json
             const packageJSONPath = join(cwd, 'package.json');
             const packageJestConfig = existsSync(packageJSONPath) && require(packageJSONPath).jest;
-            args.debug && logger.log(`jest config from package.json: ${JSON.stringify(packageJestConfig)}`);
+            args.debug && logger.info(`jest config from package.json: ${JSON.stringify(packageJestConfig)}`);
 
             // Merge configs
             // user config and args config could have value function for modification
             const config = mergeConfig(createDefaultConfig(cwd, args), packageJestConfig, userJestConfig);
-            args.debug && logger.log(`final config: ${JSON.stringify(config)}`);
+            args.debug && logger.info(`final config: ${JSON.stringify(config)}`);
 
             // Generate jest options
             const argsConfig = Object.keys(CliOptions).reduce((prev, name) => {
@@ -69,7 +66,7 @@ export default function (api) {
                 if (alias && args[alias]) prev[name] = args[alias];
                 return prev;
             }, {});
-            args.debug && logger.log(`config from args: ${JSON.stringify(argsConfig)}`);
+            args.debug && logger.info(`config from args: ${JSON.stringify(argsConfig)}`);
 
             // 比较大的库建议使用require，使用时才加载，提升fes命令的效率
             const { runCLI } = require('jest');
@@ -87,7 +84,7 @@ export default function (api) {
                 },
                 [cwd],
             );
-            args.debug && logger.log(result);
+            args.debug && logger.info(result);
 
             // Throw error when run failed
             assert(result.results.success, 'Test with jest failed');

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

@@ -1,12 +1,9 @@
 import { readdirSync, statSync, readFileSync } from 'fs';
 import { join, extname, posix, basename } from 'path';
-import { lodash, parser, generator } from '@fesjs/utils';
+import { lodash, parser, generator, logger } from '@fesjs/utils';
 import { parse } from '@vue/compiler-sfc';
-import { Logger } from '@fesjs/compiler';
 import { runtimePath } from '../../utils/constants';
 
-const logger = new Logger('fes:router');
-
 //   pages
 //  ├── index.vue         # 根路由页面 路径 /
 //  ├── *.vue             # 模糊匹配 路径 *

packages/fes-utils/src/index.js

@@ -31,6 +31,7 @@ import getHostName from './getHostName';
 import resolveRuntimeEnv from './resolveRuntimeEnv';
 import stringifyObjValue from './stringifyObjValue';
 import getTargetsAndBrowsersList from './getTargetsAndBrowsersList';
+import * as logger from './logger';
 
 export {
     chalk,
@@ -50,6 +51,7 @@ export {
     portfinder,
     resolve,
     generator,
+    logger,
 };
 
 export {

packages/fes-utils/src/logger.js

@@ -0,0 +1,35 @@
+import chalk from 'chalk';
+
+export const prefixes = {
+    wait: `${chalk.cyan('wait')}  -`,
+    error: `${chalk.red('error')} -`,
+    warn: `${chalk.yellow('warn')}  -`,
+    ready: `${chalk.green('ready')} -`,
+    info: `${chalk.cyan('info')}  -`,
+    event: `${chalk.magenta('event')} -`,
+    debug: `${chalk.gray('debug')} -`,
+};
+
+export function wait(...message) {
+    console.log(prefixes.wait, ...message);
+}
+
+export function error(...message) {
+    console.error(prefixes.error, ...message);
+}
+
+export function warn(...message) {
+    console.warn(prefixes.warn, ...message);
+}
+
+export function ready(...message) {
+    console.log(prefixes.ready, ...message);
+}
+
+export function info(...message) {
+    console.log(prefixes.info, ...message);
+}
+
+export function event(...message) {
+    console.log(prefixes.event, ...message);
+}

yarn.lock

@@ -8788,6 +8788,11 @@ pretty-format@^27.5.1:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
+pretty-time@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/pretty-time/-/pretty-time-1.1.0.tgz#ffb7429afabb8535c346a34e41873adf3d74dd0e"
+  integrity sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==
+
 prismjs@^1.27.0:
   version "1.27.0"
   resolved "https://registry.npmmirror.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
@@ -9756,6 +9761,11 @@ stack-utils@^2.0.3:
   resolved "https://registry.npmmirror.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
+std-env@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/std-env/-/std-env-3.1.1.tgz#1f19c4d3f6278c52efd08a94574a2a8d32b7d092"
+  integrity sha512-/c645XdExBypL01TpFKiG/3RAa/Qmu+zRi0MwAmrdEkwHNuN0ebo8ccAXBBDa5Z0QOJgBskUIbuCK91x0sCVEw==
+
 stickybits@^3.7.9:
   version "3.7.9"
   resolved "https://registry.npmmirror.com/stickybits/-/stickybits-3.7.9.tgz#0e469ffb960e1e661bd308ba4da370dc439902bf"
@@ -10826,6 +10836,16 @@ webpack@^5.69.0:
     watchpack "^2.3.1"
     webpack-sources "^3.2.3"
 
+webpackbar@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmmirror.com/webpackbar/-/webpackbar-5.0.2.tgz#d3dd466211c73852741dfc842b7556dcbc2b0570"
+  integrity sha512-BmFJo7veBDgQzfWXl/wwYXr/VFus0614qZ8i9znqcl9fnEdiVkdbi0TedLQ6xAK92HZHDJ0QmyQ0fmuZPAgCYQ==
+  dependencies:
+    chalk "^4.1.0"
+    consola "^2.15.3"
+    pretty-time "^1.1.0"
+    std-env "^3.0.1"
+
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
   version "0.7.4"
   resolved "https://registry.npmmirror.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"