wechat-emojis 1.0.0 → 2.0.0

package/{wechatEmoji.js → dist/index.js}

@@ -4,7 +4,15 @@
  * 提供类型安全的表情访问和图片路径获取功能
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRandomEmoji = exports.getEmojiNames = exports.hasEmoji = exports.searchEmojis = exports.getAllEmojis = exports.getEmojisByCategory = exports.getEmojiInfo = exports.getEmojiPath = exports.EMOJI_CATEGORIES = exports.EmojiCategory = void 0;
+exports.EMOJI_CATEGORIES = exports.EmojiCategory = void 0;
+exports.getEmojiPath = getEmojiPath;
+exports.getEmojiInfo = getEmojiInfo;
+exports.getEmojisByCategory = getEmojisByCategory;
+exports.getAllEmojis = getAllEmojis;
+exports.searchEmojis = searchEmojis;
+exports.hasEmoji = hasEmoji;
+exports.getEmojiNames = getEmojiNames;
+exports.getRandomEmoji = getRandomEmoji;
 /**
  * 表情类别枚举
  */
@@ -20,7 +28,7 @@ var EmojiCategory;
     EmojiCategory["BLESSING"] = "blessing";
     /** 其他表情 */
     EmojiCategory["OTHER"] = "other";
-})(EmojiCategory = exports.EmojiCategory || (exports.EmojiCategory = {}));
+})(EmojiCategory || (exports.EmojiCategory = EmojiCategory = {}));
 /**
  * 表情数据映射
  * 将表情名称映射到完整的表情信息
@@ -90,7 +98,7 @@ const EMOJI_DATA = {
     '汗': { name: '汗', category: EmojiCategory.FACE, path: 'assets/face/汗.png' },
     '天啊': { name: '天啊', category: EmojiCategory.FACE, path: 'assets/face/天啊.png' },
     'Emm': { name: 'Emm', category: EmojiCategory.FACE, path: 'assets/face/Emm.png' },
-    '社会': { name: '社会', category: EmojiCategory.FACE, path: 'assets/face/社会.png' },
+    '社会社会': { name: '社会社会', category: EmojiCategory.FACE, path: 'assets/face/社会社会.png' },
     '旺柴': { name: '旺柴', category: EmojiCategory.FACE, path: 'assets/face/旺柴.png' },
     '好的': { name: '好的', category: EmojiCategory.FACE, path: 'assets/face/好的.png' },
     '打脸': { name: '打脸', category: EmojiCategory.FACE, path: 'assets/face/打脸.png' },
@@ -138,8 +146,8 @@ const EMOJI_DATA = {
     '炸弹': { name: '炸弹', category: EmojiCategory.OTHER, path: 'assets/other/炸弹.png' },
     '便便': { name: '便便', category: EmojiCategory.OTHER, path: 'assets/other/便便.png' },
     '太阳': { name: '太阳', category: EmojiCategory.OTHER, path: 'assets/other/太阳.png' },
-    '晚安': { name: '晚安', category: EmojiCategory.OTHER, path: 'assets/other/晚安.png' },
-    '鲜花': { name: '鲜花', category: EmojiCategory.OTHER, path: 'assets/other/鲜花.png' }
+    '月亮': { name: '月亮', category: EmojiCategory.OTHER, path: 'assets/other/月亮.png' },
+    '玫瑰': { name: '玫瑰', category: EmojiCategory.OTHER, path: 'assets/other/玫瑰.png' }
 };
 /**
  * 获取所有表情数据的辅助函数
@@ -178,7 +186,6 @@ function getEmojiPath(name) {
     const emoji = EMOJI_DATA[name];
     return emoji ? emoji.path : null;
 }
-exports.getEmojiPath = getEmojiPath;
 /**
  * 获取表情信息
  * @param name 表情名称
@@ -193,7 +200,6 @@ exports.getEmojiPath = getEmojiPath;
 function getEmojiInfo(name) {
     return EMOJI_DATA[name] || null;
 }
-exports.getEmojiInfo = getEmojiInfo;
 /**
  * 根据类别获取表情列表
  * @param category 表情类别
@@ -207,7 +213,6 @@ exports.getEmojiInfo = getEmojiInfo;
 function getEmojisByCategory(category) {
     return exports.EMOJI_CATEGORIES[category];
 }
-exports.getEmojisByCategory = getEmojisByCategory;
 /**
  * 获取所有表情信息
  * @returns 所有表情的信息数组
@@ -221,7 +226,6 @@ exports.getEmojisByCategory = getEmojisByCategory;
 function getAllEmojis() {
     return getAllEmojiData();
 }
-exports.getAllEmojis = getAllEmojis;
 /**
  * 搜索表情
  * @param keyword 搜索关键词
@@ -236,7 +240,6 @@ exports.getAllEmojis = getAllEmojis;
 function searchEmojis(keyword) {
     return getAllEmojiData().filter(emoji => emoji.name.indexOf(keyword) !== -1);
 }
-exports.searchEmojis = searchEmojis;
 /**
  * 检查表情是否存在
  * @param name 表情名称
@@ -251,7 +254,6 @@ exports.searchEmojis = searchEmojis;
 function hasEmoji(name) {
     return name in EMOJI_DATA;
 }
-exports.hasEmoji = hasEmoji;
 /**
  * 获取表情名称列表
  * @param category 可选的类别筛选
@@ -275,7 +277,6 @@ function getEmojiNames(category) {
     }
     return names;
 }
-exports.getEmojiNames = getEmojiNames;
 /**
  * 随机获取表情
  * @param category 可选的类别筛选
@@ -292,7 +293,6 @@ function getRandomEmoji(category) {
     const randomIndex = Math.floor(Math.random() * emojis.length);
     return emojis[randomIndex];
 }
-exports.getRandomEmoji = getRandomEmoji;
 /**
  * 默认导出对象，包含所有主要功能
  */

package/{API.md → docs/API.md}

@@ -2,7 +2,7 @@
 
 ## 概述
 
-`wechatEmoji.ts` 提供了完整的 TypeScript 支持，让你可以类型安全地访问微信表情包资源。
+`src/index.ts` 提供了完整的 TypeScript 支持，让你可以类型安全地访问微信表情包资源。
 
 ## 安装和使用
 
@@ -36,17 +36,17 @@ import WeChatEmojis, {
   getEmojiPath,
   getEmojisByCategory,
   searchEmojis
-} from './wechatEmoji';
+} from './src';
 ```
 
 ### 3. 编译后使用 JavaScript
 
 ```bash
 # 编译 TypeScript
-npx tsc wechatEmoji.ts --target es2017 --module commonjs
+npm run build
 
 # 在 Node.js 中使用
-const { getEmojiPath, EmojiCategory } = require('./wechatEmoji.js');
+const { getEmojiPath, EmojiCategory } = require('./dist/index.js');
 ```
 
 ## API 参考
@@ -115,7 +115,7 @@ console.log(`人脸表情数量: ${faceEmojis.length}`); // 75
 
 ```typescript
 const allEmojis = getAllEmojis();
-console.log(`总表情数量: ${allEmojis.length}`); // 108
+console.log(`总表情数量: ${allEmojis.length}`); // 109
 ```
 
 #### `searchEmojis(keyword: string): EmojiInfo[]`
@@ -213,12 +213,12 @@ const selectEmoji = (emoji: EmojiInfo) => {
 
 ## 数据统计
 
-- **总表情数量**: 108 个
+- **总表情数量**: 109 个
 - **人脸表情**: 75 个
-- **手势表情**: 7 个
+- **手势表情**: 10 个
 - **动物表情**: 4 个
 - **祝福表情**: 7 个
-- **其他表情**: 15 个
+- **其他表情**: 13 个
 
 ## 注意事项
 

package/docs/NPM_USAGE.md

@@ -0,0 +1,223 @@
+# 微信表情包 NPM 包使用指南
+
+### 1. 安装包
+
+```bash
+npm install wechat-emojis
+```
+
+### 2. 在 React 项目中使用
+
+#### 基础导入
+
+```typescript
+import {
+  getEmojiPath,
+  getEmojisByCategory,
+  EmojiCategory,
+  searchEmojis,
+  getRandomEmoji,
+  type EmojiName
+} from 'wechat-emojis';
+```
+
+#### 创建表情组件
+
+```tsx
+// components/WeChatEmoji.tsx
+import React from 'react';
+import { getEmojiPath, type EmojiName } from 'wechat-emojis';
+
+interface WeChatEmojiProps {
+  name: EmojiName;
+  size?: number;
+  className?: string;
+}
+
+const WeChatEmoji: React.FC<WeChatEmojiProps> = ({
+  name,
+  size = 24,
+  className = ''
+}) => {
+  const emojiPath = getEmojiPath(name);
+
+  if (!emojiPath) {
+    return null;
+  }
+
+  return (
+    <img
+      src={emojiPath}
+      alt={name}
+      width={size}
+      height={size}
+      className={`wechat-emoji ${className}`}
+    />
+  );
+};
+
+export default WeChatEmoji;
+```
+
+#### 使用示例
+
+```tsx
+// App.tsx
+import React from 'react';
+import WeChatEmoji from './components/WeChatEmoji';
+import { getEmojisByCategory, EmojiCategory } from 'wechat-emojis';
+
+function App() {
+  const faceEmojis = getEmojisByCategory(EmojiCategory.FACE);
+
+  return (
+    <div>
+      <h1>微信表情包示例</h1>
+
+      {/* 单个表情 */}
+      <WeChatEmoji name="微笑" size={32} />
+      <WeChatEmoji name="大哭" size={32} />
+
+      {/* 表情列表 */}
+      <div>
+        {faceEmojis.slice(0, 10).map(emoji => (
+          <WeChatEmoji key={emoji} name={emoji} size={24} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default App;
+```
+
+### 3. 处理静态资源
+
+由于表情图片是静态资源，你需要将它们复制到项目的 public 目录：
+
+#### 方法一：手动复制
+
+```bash
+# 创建资源目录
+mkdir -p public/assets
+
+# 复制资源文件
+cp -r node_modules/wechat-emojis/assets/* public/assets/
+```
+
+#### 方法二：使用构建脚本
+
+在你的 `package.json` 中添加：
+
+```json
+{
+  "scripts": {
+    "postinstall": "mkdir -p public/assets && cp -r node_modules/wechat-emojis/assets/* public/assets/",
+    "build": "npm run copy-assets && react-scripts build",
+    "copy-assets": "mkdir -p public/assets && cp -r node_modules/wechat-emojis/assets/* public/assets/"
+  }
+}
+```
+
+#### 方法三：使用 webpack 配置
+
+如果你使用自定义 webpack 配置，可以添加：
+
+```javascript
+// webpack.config.js
+const CopyPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: 'node_modules/wechat-emojis/assets',
+          to: 'assets'
+        }
+      ]
+    })
+  ]
+};
+```
+
+## 🔧 TypeScript 支持
+
+包已包含完整的 TypeScript 类型定义，你可以享受完整的类型检查和智能提示：
+
+```typescript
+import { EmojiName, EmojiCategory } from 'wechat-emojis';
+
+// 类型安全的表情名称
+const emojiName: EmojiName = '微笑'; // ✅ 正确
+const invalidName: EmojiName = '不存在的表情'; // ❌ TypeScript 错误
+
+// 枚举类型
+const category: EmojiCategory = EmojiCategory.FACE;
+```
+
+## 📱 在其他框架中使用
+
+### Vue.js
+
+```vue
+<template>
+  <div>
+    <img :src="getEmojiPath('微笑')" alt="微笑" width="24" height="24" />
+  </div>
+</template>
+
+<script>
+import { getEmojiPath } from 'wechat-emojis';
+
+export default {
+  methods: {
+    getEmojiPath
+  }
+};
+</script>
+```
+
+### Angular
+
+```typescript
+// emoji.service.ts
+import { Injectable } from '@angular/core';
+import { getEmojiPath, getEmojisByCategory, EmojiCategory } from 'wechat-emojis';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EmojiService {
+  getEmojiPath = getEmojiPath;
+  getEmojisByCategory = getEmojisByCategory;
+  EmojiCategory = EmojiCategory;
+}
+```
+
+```html
+<!-- emoji.component.html -->
+<img [src]="emojiService.getEmojiPath('微笑')" alt="微笑" width="24" height="24">
+```
+
+## 🎯 最佳实践
+
+1. **预加载常用表情**：在应用启动时预加载常用表情图片
+2. **懒加载**：对于大量表情，考虑使用懒加载
+3. **缓存**：利用浏览器缓存机制，避免重复加载
+4. **错误处理**：始终检查 `getEmojiPath` 的返回值
+5. **性能优化**：使用 `React.memo` 或类似优化手段避免不必要的重渲染
+
+## 🐛 常见问题
+
+### Q: 表情图片显示不出来？
+
+A: 确保已将 assets 目录复制到项目的 public 目录中。
+
+### Q: TypeScript 类型错误？
+
+A: 确保安装了最新版本的包，并重启 TypeScript 服务。
+
+### Q: 如何自定义表情路径？
+
+A: 你可以修改返回的路径，或者将图片复制到自定义目录。

package/{REACT_USAGE.md → docs/REACT_USAGE.md}

@@ -58,16 +58,15 @@ const WeChatEmoji: React.FC<{name: EmojiName}> = ({ name }) => {
 mkdir -p src/utils/wechat-emojis
 mkdir -p public/assets
 
-# 复制TypeScript模块
-cp path/to/wechatEmoji.ts src/utils/wechat-emojis/
-cp path/to/wechatEmoji.js src/utils/wechat-emojis/
+# 复制构建产物（npm 包内不含 src/，克隆仓库时可用 path/to/dist/index.js）
+cp path/to/dist/index.js src/utils/wechat-emojis/
 
 # 复制表情资源到public目录
 cp -r path/to/assets/* public/assets/
 ```
 
 2. **调整图片路径**（重要）：
-由于React项目中public目录的资源访问方式，需要修改 `wechatEmoji.ts` 中的图片路径，将所有 `'assets/'` 替换为 `'/assets/'`。
+由于React项目中public目录的资源访问方式，需要修改复制过去的 `dist/index.js` 中的图片路径，将所有 `'assets/'` 替换为 `'/assets/'`。使用 npm 包时无需修改，包内的路径是 `assets/...`，直接拼到 `/` 后面即可（如上面的 `/${emojiPath}`）。
 
 
 ## 🚀 基础使用

package/package.json

@@ -1,23 +1,29 @@
 {
   "name": "wechat-emojis",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "完整的微信内置表情资源库，包含 109 个高清 PNG 图片和类型安全的 TypeScript API",
-  "main": "wechatEmoji.js",
-  "types": "wechatEmoji.d.ts",
-  "module": "wechatEmoji.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
-    "wechatEmoji.js",
-    "wechatEmoji.ts",
-    "wechatEmoji.d.ts",
-    "assets/**/*",
-    "README.md",
-    "API.md",
-    "REACT_USAGE.md"
+    "dist/index.js",
+    "dist/index.d.ts",
+    "assets/**/*.png",
+    "docs/API.md",
+    "docs/NPM_USAGE.md",
+    "docs/REACT_USAGE.md",
+    "README.md"
   ],
   "scripts": {
     "build": "tsc",
-    "prepublishOnly": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "typecheck": "tsc --noEmit",
+    "typecheck:scripts": "tsc -p tsconfig.scripts.json",
+    "verify:assets": "node scripts/verify-assets.ts",
+    "typecheck:examples": "tsc --noEmit --target es2017 --module commonjs --moduleResolution node --strict examples/typescript/example.ts",
+    "test": "npm run build && npm run typecheck:scripts && npm run typecheck:examples && npm run verify:assets && npm run check:package",
+    "build:site": "node scripts/build-site.ts",
+    "check:site": "node scripts/check-site.ts",
+    "check:package": "node scripts/check-package.ts",
+    "prepare": "node scripts/prepare.ts"
   },
   "keywords": [
     "wechat",
@@ -39,9 +45,11 @@
   "bugs": {
     "url": "https://github.com/xxk8/wechat-emojis/issues"
   },
-  "homepage": "https://github.com/xxk8/wechat-emojis#readme",
+  "homepage": "https://xxk8.github.io/wechat-emojis/",
   "devDependencies": {
-    "typescript": "^5.0.0"
+    "@types/node": "^22.20.5",
+    "esbuild": "^0.28.2",
+    "typescript": "^5.9.2"
   },
   "engines": {
     "node": ">=14.0.0"