# @elementor/angie-logger 中文文档

规范地址：https://npmcn.com/package/%40elementor/angie-logger/

版本：0\.3\.2
npm 元数据更新时间：2026-11-09T15:14:24.245Z
中文译文更新时间：2026-11-13T12:06:50.761Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40elementor/angie-logger
原文对照：https://npmcn.com/package/%40elementor/angie-logger/?lang=original
项目主页：https://github.com/elementor/elementor-ai/tree/master/packages/angie-logger
源码仓库：https://github.com/elementor/elementor-ai

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：27.1 kB，8 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=24\.0\.0
- 运行依赖：0 个
- 首次发布：2025-10-20T06:09:05.680Z
- 最新版本发布：2026-11-09T15:14:23.902Z
- 近 30 天下载量：15575（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 1 个）

## 中文简介

Angie AI 助手共享日志工具

## 安装

```sh
npm install @elementor/angie-logger
```

也可以使用：`pnpm add @elementor/angie-logger`、`yarn add @elementor/angie-logger`、`bun add @elementor/angie-logger`

## README

# @elementor/angie-logger (英语)

**安吉AI助理的共享日志工具.**

这个包提供了一个灵活,有上下文感的日志器,并带有颗粒式日志级别控制.

* * *

## 特征

-   **外观对数水平**: 控制5级伐木: `debug`, (中文(简体) ), `info`, (中文(简体) ), `warn`, (中文(简体) ), `error`, (中文(简体) ), `none`
-   **了解背景**: 支持可以嵌入的字符串和基于对象的背景
-   **动态控制**: 运行时更改日志级别 `setLogLevel()`
-   **类型安全**: 在 TypeScript 中以完整类型定义写入
-   **零依赖关系**: 没有运行时间依赖, 轻量级捆绑
-   **环境不可知性**: 没有内置环境检测 - 您决定日志级别

* * *

## 安装

```bash
npm install @elementor/angie-logger
```

* * *

## 快速启动

### 基本用途

```typescript
import { createLogger } from '@elementor/angie-logger';

const logger = createLogger('MyApp');

logger.debug('Detailed debug information');
logger.log('General log message');
logger.info('Informational message');
logger.warn('Warning message');
logger.error('Error message');
```

### 设置日志级别

```typescript
import { createLogger } from '@elementor/angie-logger';

const logger = createLogger('MyApp');

// Set to only show warnings and errors
logger.setLogLevel('warn');

logger.debug('Not logged');
logger.info('Not logged');
logger.warn('This WILL be logged');
logger.error('This WILL be logged');
```

### 有上下文对象

```typescript
const logger = createLogger({ app: 'MyApp', version: '1.0.0' });

logger.info('Application initialized');
// Output: [{"app":"MyApp","version":"1.0.0"}] Application initialized
```

### 正在扩展 Loggers

```typescript
const baseLogger = createLogger('MyApp');
const moduleLogger = baseLogger.extend('UserModule');
const componentLogger = moduleLogger.extend('LoginForm');

componentLogger.log('Form rendered');
// Output: [MyApp > UserModule > LoginForm] Form rendered
```

### 混合上下文类型

```typescript
const appLogger = createLogger('MyApp');
const featureLogger = appLogger.extend({ feature: 'Authentication', userId: 123 });

featureLogger.info('User authenticated');
// Output: [MyApp > {"feature":"Authentication","userId":123}] User authenticated
```

### 基于环境的日志级别

```typescript
import { createLogger } from '@elementor/angie-logger';

const logger = createLogger('MyApp');

// Set log level based on environment
if (process.env.NODE_ENV === 'production') {
  logger.setLogLevel('warn'); // Only warnings and errors in production
} else if (process.env.NODE_ENV === 'test') {
  logger.setLogLevel('none'); // Silent during tests
}
// Development: default 'debug' level shows everything
```

### URL 参数调试模式

```typescript
const logger = createLogger('MyApp', { logLevel: 'warn' });

const params = new URLSearchParams(window.location.search);
if (params.has('debug')) {
  logger.setLogLevel('debug');
}
```

### 配置选项

您可以通过一个配置对象自定义日志行为 :

```typescript
import { createLogger, LoggerConfig, LogLevel } from '@elementor/angie-logger';

const config: LoggerConfig = {
  logLevel: 'info',        // Set initial log level
  color: '#ff6b6b',        // Custom color for context labels
};

const logger = createLogger('MyApp', config);
```

#### 可用的配置选项

-   **`logLevel`** (单位:千美元)`LogLevel`,默认值 : `'debug'`: 初始日志级别
    
    ```typescript
    const logger = createLogger('MyApp', { logLevel: 'warn' });
    logger.info('This will NOT be logged');
    logger.warn('This WILL be logged');
    ```
    
-   **`color`** (字符串,默认值 : `'#00bcd4'`: 浏览器控制台上下文标签的颜色
    
    ```typescript
    const logger = createLogger('MyApp', { color: '#ff6b6b' });
    ```
    

**说明:** 扩展日志时保存配置 :

```typescript
const baseLogger = createLogger('App', { logLevel: 'warn', color: '#00ff00' });
const childLogger = baseLogger.extend('Module'); // Keeps the log level and color
```

* * *

## 行为

### 日志级别

Logger 支持 5 个日志水平, 其动词减少 :

1.  **`debug`** (默认):所有信件都已登录(调试、日志、信息、警告、错误)
2.  **`info`**: 信息信息及以上(日志、信息、警告、错误)
3.  **`warn`**: 仅警告和错误(警告、错误)
4.  **`error`**: 只出错( 错误)
5.  **`none`**: 无记录( 完全沉默 )

### 日志级别优先级

每个级别包括来自更高优先级别的所有信息:

```typescript
const logger = createLogger('MyApp');

// debug level (default) - logs everything
logger.setLogLevel('debug');
logger.debug('✓ Logged');
logger.log('✓ Logged');
logger.info('✓ Logged');
logger.warn('✓ Logged');
logger.error('✓ Logged');

// info level - logs info, log, warn, error
logger.setLogLevel('info');
logger.debug('✗ Not logged');
logger.log('✓ Logged');
logger.info('✓ Logged');
logger.warn('✓ Logged');
logger.error('✓ Logged');

// warn level - logs warn, error
logger.setLogLevel('warn');
logger.debug('✗ Not logged');
logger.log('✗ Not logged');
logger.info('✗ Not logged');
logger.warn('✓ Logged');
logger.error('✓ Logged');

// error level - logs error only
logger.setLogLevel('error');
logger.debug('✗ Not logged');
logger.log('✗ Not logged');
logger.info('✗ Not logged');
logger.warn('✗ Not logged');
logger.error('✓ Logged');

// none level - logs nothing
logger.setLogLevel('none');
logger.error('✗ Not logged');
```

### 水平绘图方法

-   `debug()` − 调试级别
-   `log()` • 信息级别
-   `info()` • 信息级别
-   `warn()` - 警告级别
-   `error()` • 错误水平

* * *

## API 参考

### `createLogger(context, config?)`

创建新的日志实例.

**参数:**

-   `context`数字 : `string | Record<string, unknown>` - 日志初始上下文
-   `config?`数字 : `LoggerConfig` (可选) - 配置选项
    -   `logLevel?`数字 : `LogLevel` - 初始日志级别( 默认值 : `'debug'`(中文(简体) )
    -   `color?`数字 : `string` - 上下文标签的颜色( 默认 ): `'#00bcd4'`(中文(简体) )

**回返情况:** `Logger` 实例

### 伐木方法

-   `log(...args)`: 通用记录(信息级别)
-   `info(...args)`: 信息信息(信息级别)
-   `warn(...args)`: 警告消息( 警告级别)
-   `error(...args)`: 错误消息( 错误级别)
-   `debug(...args)`: 调试消息( 调试级别)
-   `extend(subContext)`: 创建一个附加上下文的儿童日志
-   `setLogLevel(level)`: 动态更改日志级别

### 日志级别类型

```typescript
type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'none';
```

* * *

## 实例

### 反应组件

```typescript
import { createLogger } from '@elementor/angie-logger';

const logger = createLogger('ImageGallery');

if (process.env.NODE_ENV === 'production') {
  logger.setLogLevel('error');
}

function ImageGallery() {
  logger.debug('Component mounting');
  
  const handleImageLoad = (imageId: string) => {
    logger.info('Image loaded', { imageId });
  };
  
  const handleError = (error: Error) => {
    logger.error('Failed to load image', error);
  };
  
  return (
    // component JSX
  );
}
```

### 服务层

```typescript
import { createLogger } from '@elementor/angie-logger';

const logger = createLogger({ service: 'ApiClient' });

class ApiClient {
  private logger = logger.extend({ method: 'fetch' });
  
  async fetch(endpoint: string) {
    this.logger.debug('Fetching data', { endpoint });
    
    try {
      const response = await fetch(endpoint);
      this.logger.info('Data fetched successfully', { endpoint });
      return response.json();
    } catch (error) {
      this.logger.error('Failed to fetch data', { endpoint, error });
      throw error;
    }
  }
}
```

### 动态日志控制

```typescript
import { createLogger } from '@elementor/angie-logger';

const logger = createLogger('App');

// Expose methods globally for debugging
if (typeof window !== 'undefined') {
  window.setLogLevel = (level) => logger.setLogLevel(level);
}

// Then in browser console:
// window.setLogLevel('debug')  // Show all logs
// window.setLogLevel('warn')   // Only warnings and errors
// window.setLogLevel('none')   // Silence all logs
```

### 测试

```typescript
import { createLogger } from '@elementor/angie-logger';

describe('MyComponent', () => {
  beforeAll(() => {
    // Silence logs during tests
    const logger = createLogger('MyComponent');
    logger.setLogLevel('none');
  });
  
  // your tests
});
```

### 每个模块的日志级别不同

```typescript
import { createLogger } from '@elementor/angie-logger';

const apiLogger = createLogger('API', { logLevel: 'warn' });
const uiLogger = createLogger('UI', { logLevel: 'debug' });

apiLogger.info('Not logged - API is warn level');
apiLogger.error('Logged - error is >= warn');

uiLogger.info('Logged - UI is debug level');
uiLogger.debug('Logged - UI is debug level');
```

## 常见问题

### @elementor/angie-logger 是什么？

Angie AI 助手共享日志工具

### 如何安装 @elementor/angie-logger？

在项目目录运行 npm install @elementor/angie-logger，或使用 pnpm add / yarn add / bun add。

### @elementor/angie-logger 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @elementor/angie-logger 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @elementor/angie-logger 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=24\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @elementor/angie-logger 可以商用吗？

@elementor/angie-logger 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @elementor/angie-logger 的下载量有多少？

根据 npm 官方下载统计，@elementor/angie-logger 在 2026/10/14 – 2026/11/12 这 30 天内被下载 15,575 次，日均约 519 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @elementor/angie-logger 还在维护吗？

最新版本 0\.3\.2 发布于 2026/11/09（4 天前）；至今共发布 8 个版本，其中过去 12 个月发布了 1 个；首次发布于 2025/10/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。