# @dxtmisha/media 中文文档

规范地址：https://npmcn.com/package/%40dxtmisha/media/

版本：1\.1\.2
npm 元数据更新时间：2026-11-07T17:15:17.463Z
中文译文更新时间：2026-11-14T14:49:42.369Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40dxtmisha/media
原文对照：https://npmcn.com/package/%40dxtmisha/media/?lang=original
项目主页：https://github.com/dxtmisha/dxt-ui/tree/main/packages/media
源码仓库：https://github.com/dxtmisha/dxt-ui

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

- 包体积（解压后）：4.6 MB，14 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.0\.0
- 运行依赖：0 个
- 首次发布：2025-09-27T14:24:41.136Z
- 最新版本发布：2026-11-07T17:15:17.285Z
- 近 30 天下载量：2012（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 16 个）

## 中文简介

媒体资源,矢量图标库,以及DXT UI的地理学数据集——文件分类,社交网络,国家旗帜,和ISO 3166-1国家元数据. 框架-不可知,可树可动摇,零依赖.

## 安装

```sh
npm install @dxtmisha/media
```

也可以使用：`pnpm add @dxtmisha/media`、`yarn add @dxtmisha/media`、`bun add @dxtmisha/media`

## README

# @dxtmisha/媒体

[![npm version](https://badge.fury.io/js/@dxtmisha%2Fmedia.svg)](https://www.npmjs.com/package/@dxtmisha/media) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Node.js Version](https://img.shields.io/badge/node-%3E%3D20.0.0-brightgreen)](https://nodejs.org/)

`@dxtmisha/media` 是一个基础媒体资源,矢量图标库,以及用于现代网络开发的地理数据集库. 它是框架可知性,可树可摇动,可零依赖性,可用于任何TypeScript项目——无论是Vue,React,Nuxt还是平版浏览器代码.

## 为什么是图书馆?

每个网络应用程序最终都面临相同的经常性要求:处理文件上传和显示文件类型的图标,验证和格式化社交媒体简介和用户手柄,并制作本地化的国旗或电话号码输入口罩. 通常情况下,项目用零碎的SVG片段、临时的正则表达式、膨胀的图标字体以及复制的国别数据集来解决这些问题,这些数据集很快会过时并不必要地增加生产捆绑.

`@dxtmisha/media` 将所有这些解决办法集中在一个地方——深思熟虑、经过检验和准备使用。 重型SVG资产与核心元数据登记册完全脱钩,只允许您导入您需要的,并保持客户端捆绑最小化.

## 这有什么用?

对于 **文件处理和分类** —— 说 `MediaFile` 统一多种输入( 本地浏览器) `File` 或者说 `Blob` 对象,数据 URL, Blob URL, 远程 URL, 文件系统路径, MIME 类型, 或扩展代码) 变成一个标准化的界面. 它解决了文件名,无扩展基名,规范扩展名,犬类MIME类型,跨出16个媒体分类的类别(`image`, (中文(简体) ), `video`, (中文(简体) ), `document`, (中文(简体) ), `archive`, (中文(简体) ), `table`)和22个内置布尔检查器(`isImage()`, (中文(简体) ), `isDocument()`, (中文(简体) ), `isArchive()`(见a/c.5/49/70,附件).

对于 **文件目录和自定义图标** —— 说 `MediaFiles` 通过代码、扩展或MIME类型提供集中的搜索,并带有懒惰的内存 `Map` 用于即时O(1)检索的索引,同时 `MediaFileIcon` 提供原型-同位素内置录相机,以动态地将自定义的SVG图标与流畅的方法链接相覆盖或注入.

对于 **社交媒体网络和处理** 35+全球和区域网络(GitHub、Telegram、Instagram、X/Twitter、WeChat、Reddit、Zalo等)的综合元数据. `MediaSocialNickname` 格式化平台专用手柄(`@dxtmisha`, (中文(简体) ), `u/dxtmisha`, (中文(简体) ), `MediaSocialUrl` 构造具有重复前缀保护的 canonial profile 链接,以及 `MediaSocialValue` 在剥取查询参数,端口和危险协议时提取干净的用户名.

对于 **国家旗帜和地理数据** - PascalCase250+矢量SVG国家旗帜(`UsSvg`, (中文(简体) ), `VnSvg`, (中文(简体) ), `FrSvg`以及结构化的ISO 3166-1国家数据集(例如)`geo.json`),涵盖国际电话代码,输入口罩,主时区,默认语言,首周首日,非计量单位覆盖.

对于 **同位素安全和字符串公用事业** ——安全协议核查(`isDangerousProtocol`防止受SS攻击(`javascript:`, (中文(简体) ), `data:`, (中文(简体) ), `vbscript:`), URL前缀替换(`replacePrefix`),以及 保留案例的 URL 正常化(`toLower`) (中文(简体) ).

## 安装

```bash
npm install @dxtmisha/media
```

## 快速启动

```typescript
import { MediaFile, MediaFiles, MediaSocial, InputSocialType, geo } from '@dxtmisha/media'
import { registerFileIcons } from '@dxtmisha/media/files'
import { registerSocialIcons } from '@dxtmisha/media/socials'
import { UsSvg, VnSvg } from '@dxtmisha/media/flags'

// Register standard SVG file & social icons
registerFileIcons()
registerSocialIcons()

// 1. File inspection & classification
const file = new MediaFile('https://example.com/assets/annual-report.2026.pdf?v=2#page=1')
file.name         // 'annual-report.2026.pdf'
file.baseName     // 'annual-report.2026'
file.extension    // 'pdf'
file.mime         // 'application/pdf'
file.isDocument() // true
file.isImage()    // false
file.icon         // '<svg ...'

// 2. Static catalog lookups
const pdfItem = MediaFiles.getByMime('application/pdf')
MediaFiles.isLink('https://example.com/doc.pdf') // true

// 3. Social media URLs and handles
MediaSocial.getUrl(InputSocialType.github, 'dxtmisha')                       // 'https://github.com/dxtmisha'
MediaSocial.getValue(InputSocialType.github, 'https://github.com/dxtmisha') // 'dxtmisha'
MediaSocial.getNickname(InputSocialType.telegram, 'dxtmisha')                // '@dxtmisha'
MediaSocial.getNickname(InputSocialType.reddit, 'dxtmisha')                  // 'u/dxtmisha'

// 4. Country flags & geographical data
const us = geo.find(item => item.country === 'US')
us?.phoneCode // '1'
us?.phoneMask // '(...) ...-....'
UsSvg         // '<svg ...'
VnSvg         // '<svg ...'
```

## 子路径导出

为了最小化应用程序捆绑大小,将重型SVG资产隔离在专用子路径入口:

| 导入路径 | 目录 |
| :-- | :-- |
| `@dxtmisha/media` | 核心类别`MediaFile`, (中文(简体) ), `MediaFiles`, (中文(简体) ), `MediaFileIcon`, (中文(简体) ), `MediaSocial`, (中文(简体) ), `MediaSocialNickname`, (中文(简体) ), `MediaSocialUrl`, (中文(简体) ), `MediaSocialValue`(b) 元数据登记册`fileList`, (中文(简体) ), `socialList`, (中文(简体) ), `geo`),工具函数,以及TypeScript类型而不捆绑 SVG字符串. |
| `@dxtmisha/media/files` | 85个向量 SVG 文件图标(`fileIcons`和 `registerFileIcons()` 初始化帮助器. |
| `@dxtmisha/media/socials` | 35个向量 SVG 社交媒体图标(`socialIcons`和 `registerSocialIcons()` 初始化帮助器. |
| `@dxtmisha/media/flags` | PascalCase中的250+矢量SVG国家旗帜(`UsSvg`, (中文(简体) ), `VnSvg`, (中文(简体) ), `FrSvg`(见a/c.5/49/70,附件). |

## 原则

-   **外部依赖性为零** ——独立SVG向量资产,打出类,和JSON数据集,第三方依赖度为零.
-   **树摇动优化** ——核心元数据包含零SVG字符串;矢量资产通过专用子路径按需导入.
-   **类型脚本第一** ——严格打字,明确接口,并自发地从框中取出零 `any`。 。 。 .
-   **清洁 API** ——可预见方法连锁,单责任类,直观命名.
-   **Isomorphic & SSR 安全性** ——对于Node.js,Nitro,Nuxt,Next.js,以及客户端的运行时间,没有DOM泄露或窗口依赖.
-   **测试覆盖率** ——每艘有综合单位试验的级,通用和边壳船(570+试验).

## 文档

完整的 API 参考、示例和指南 :

**[• https://dxtmisha.github.io/dxt-ui/?path=/docs/dxtmisha-en-media-about-the-library-docs](https://dxtmisha.github.io/dxt-ui/?path=/docs/dxtmisha-en-media-about-the-library--docs)**

## 许可证

[麻省理工学院](https://npmcn.com/package/%40dxtmisha/media/LICENSE)

## 常见问题

### @dxtmisha/media 是什么？

媒体资源,矢量图标库,以及DXT UI的地理学数据集——文件分类,社交网络,国家旗帜,和ISO 3166-1国家元数据\. 框架-不可知,可树可动摇,零依赖\.

### 如何安装 @dxtmisha/media？

在项目目录运行 npm install @dxtmisha/media，或使用 pnpm add / yarn add / bun add。

### @dxtmisha/media 支持 TypeScript 吗？

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

### @dxtmisha/media 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @dxtmisha/media 需要什么版本的 Node\.js？

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

### @dxtmisha/media 可以商用吗？

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

### @dxtmisha/media 的下载量有多少？

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

### @dxtmisha/media 还在维护吗？

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