feat: build cli 增加 --loglevel 参数 (#1435)

* chore: build & cli 增加 --log-level 参数

且应用到 runtime debug

* chore: 统一构建日志格式

* chore: rename loglevel

* fix: types

docs/guide/basic/cli.md

@@ -13,15 +13,16 @@ remax build
 编译项目
 
 选项：
- --version 显示版本号 [布尔]
- --help 显示帮助信息 [布尔]
- -w, --watch 监听文件变化 [布尔] [默认值: false]
- -t, --target 目标平台 [字符串] [默认值: "ali"]
- -n, --notify 编译错误提醒 [布尔] [默认值: false]
- -p, --port 指定端口号 [数字]
- -m, --minimize 最小化文件 [布尔] [默认值: false]
- -a, --analyze 编译分析 [布尔] [默认值: false]
- -d, --devtools 启动 react-devtools 调试 [布尔] [默认值: true]
+ --version 显示版本号 [布尔]
+ --help 显示帮助信息 [布尔]
+ -w, --watch 监听文件变化 [布尔] [默认值: false]
+ -t, --target 目标平台 [字符串] [默认值: "ali"]
+ -n, --notify 编译错误提醒 [布尔] [默认值: false]
+ -p, --port 指定端口号 [数字]
+ -m, --minimize 最小化文件 [布尔] [默认值: false]
+ -a, --analyze 编译分析 [布尔] [默认值: false]
+ -d, --devtools 启动 react-devtools 调试 [布尔] [默认值: true]
+ --loglevel 展示日志级别 [字符串] [默认值: "verbose"]
 ```
 
 ### --target
@@ -58,3 +59,13 @@ remax build
 ## --devtools
 
 启动 react-devtools 调试模式，详见[调试工具](/guide/basic/devtools)介绍，开发环境下默认开启，如需关闭，可使用参数 `--no-devtools` 强制关闭。
+
+## --loglevel
+
+设置展示日志级别，可选值 'debug' | 'verbose' | 'info' | 'warn' | 'error' | 'silent'
+
+- `debug` 包含详细的 remax 运行时信息
+- `verbose` `info` 详细信息
+- `warn` 编译警告提示信息
+- `error` 编译错误提示信息
+- `silent` 不展示任何信息（webpack 构建日志除外）

packages/remax-cli/src/build/index.ts

@@ -29,10 +29,12 @@ export function buildApp(options: Options) {
 }
 
 export function internalBuildApp(options: Options, api: API) {
- const { target } = options;
+ const { target, loglevel = 'verbose' } = options;
+ output.level = loglevel;
 
  process.env.REMAX_PLATFORM = target;
 
+ output.message('🚀 构建应用', 'blue');
  output.message(`\n⌨️ remax v${version}\n`, 'green');
 
  const result = run(options, api);
@@ -43,12 +45,13 @@ export function internalBuildApp(options: Options, api: API) {
 export function buildMiniPlugin(options: Options) {
  process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
- const { target } = options;
+ const { target, loglevel = 'verbose' } = options;
+ output.level = loglevel;
 
  process.env.REMAX_PLATFORM = target;
 
- output.message(`\n⌨️ remax v${version}\n`, 'green');
  output.message(`🔨 构建插件`, 'blue');
+ output.message(`\n⌨️ remax v${version}\n`, 'green');
 
  const api = new API();
  api.registerPlugins([]);

packages/remax-cli/src/build/utils/output.ts

@@ -1,4 +1,5 @@
 import notifier from 'node-notifier';
+import { LogLevel } from '@remax/types';
 
 const COLORS = {
  red: '\x1b[31m',
@@ -20,8 +21,31 @@ export const output = (content: string | string[], color: 'red' | 'green' | 'blu
  }
 };
 
+const levelMap = { debug: 0, verbose: 1, info: 2, warn: 3, error: 4, silent: 5 };
+let levelText: LogLevel = 'verbose';
+let levelWidth = levelMap[levelText];
+
 export default {
- message: output,
- error: (message: string, notify?: boolean) => output(`\n🚨 ${message}`, 'red', notify),
- warn: (message: string, notify?: boolean) => output(`\n⚠️ ${message}`, 'yellow', notify),
+ get level() {
+ return levelText;
+ },
+ set level(value: LogLevel) {
+ levelText = value;
+ levelWidth = levelMap[value] ?? 1;
+ },
+ message(...args: Parameters<typeof output>) {
+ if (levelWidth <= 2) {
+ output(...args);
+ }
+ },
+ error(message: string, notify?: boolean) {
+ if (levelWidth <= 4) {
+ output(`\n🚨 ${message}`, 'red', notify);
+ }
+ },
+ warn(message: string, notify?: boolean) {
+ if (levelWidth <= 3) {
+ output(`\n⚠️ ${message}`, 'yellow', notify);
+ }
+ },
 };

packages/remax-cli/src/build/webpack/config.mini.ts

@@ -22,6 +22,7 @@ import API from '../../API';
 import { cssConfig, addCSSRule, RuleConfig } from './config/css';
 import baseConfig from './baseConfig';
 import Builder from '../Builder';
+import output from '../utils/output';
 
 function prepare(api: API) {
  const meta = api.getMeta();
@@ -185,7 +186,7 @@ export default function webpackConfig(builder: Builder): webpack.Configuration {
 
  const runtimeOptions = {
  pxToRpx: builder.options.pxToRpx,
- debug: !!process.env.REMAX_DEBUG,
+ debug: !!process.env.REMAX_DEBUG || output.level === 'debug',
  platform: builder.options.target,
  pluginFiles: builder.api.getRuntimePluginFiles(),
  hostComponents: '[]',

packages/remax-cli/src/build/webpack/config.miniPlugin.ts

@@ -21,6 +21,7 @@ import * as RemaxPlugins from './plugins';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import Builder from '../Builder';
 import NativeEntry from '../entries/NativeEntry';
+import output from '../utils/output';
 
 function resolveBabelConfig(options: Options) {
  if (fs.existsSync(path.join(options.cwd, 'babel.config.js'))) {
@@ -159,7 +160,7 @@ export default function webpackConfig(builder: Builder): webpack.Configuration {
 
  const runtimeOptions = {
  pxToRpx: builder.options.pxToRpx,
- debug: !!process.env.REMAX_DEBUG,
+ debug: !!process.env.REMAX_DEBUG || output.level === 'debug',
  platform: builder.target,
  pluginFiles: builder.api.getRuntimePluginFiles(),
  hostComponents: '[]',

packages/remax-cli/src/index.ts

@@ -3,7 +3,6 @@ import { Options } from '@remax/types';
 import { internalBuildApp, buildMiniPlugin } from './build';
 import getConfig from './getConfig';
 import API from './API';
-import output from './build/utils/output';
 
 export * from './legacyExport';
 
@@ -75,10 +74,14 @@ export default class RemaxCLI {
  alias: 'd',
  type: 'boolean',
  default: true,
+ })
+ .option('loglevel', {
+ describe: '展示日志级别',
+ type: 'string',
+ default: 'verbose',
  });
  },
  (argv: any) => {
- output.message('🚀 开始构建\n', 'blue');
  internalBuildApp({ ...this.options, ...argv }, this.api!);
  try {
  require('remax-stats').run({ type: 'remax' });

packages/remax-types/src/index.ts

@@ -3,6 +3,8 @@ import yargs from 'yargs';
 import WebpackConfig from 'webpack-chain';
 import * as t from '@babel/types';
 
+export type LogLevel = 'debug' | 'verbose' | 'info' | 'warn' | 'error' | 'silent';
+
 export enum Platform {
  'web' = 'web',
  'wechat' = 'wechat',
@@ -49,6 +51,7 @@ export interface BuildOptions {
  component?: any;
  web?: WebOptions;
  minimize?: boolean;
+ loglevel?: LogLevel;
 }
 
 export type Options = BuildOptions & PluginOptions;