共计 1320 个字符，预计需要花费 4 分钟才能阅读完成。

引言

作为刚入行的开发者，你是否经常遇到这些问题：

• 相同工具函数在多个项目间复制粘贴
• 修改公共代码后需要手动同步所有项目
• 版本升级导致依赖冲突
• 缺乏标准化测试影响稳定性

这些问题本质源于代码复用方式不当。本文将系统讲解如何通过技能包（skill package）实现优雅的模块化开发。

模块化方案对比

1. 直接复制代码

// utils.ts
function formatDate(date: Date) {/* 重复实现 */}

缺点 ：
– 维护成本 O(n) 增长
– 无法追踪修改历史

2. Git 子模块

git submodule add git@repo:common-utils.git

优点 ：
– 版本控制粒度更细

缺点 ：
– 嵌套依赖管理复杂
– 更新流程繁琐

3. NPM 包

npm install @skills/date-utils

推荐方案 ：
– 完善的版本管理
– 自动依赖解析

技能包开发实战

1. 初始化工程

mkdir skill-date && cd skill-date
npm init -y
tsc --init

2. 核心代码结构

classDiagram
    class DateUtils{+formatISO(date: Date): string
        +parseUTC(str: string): Date
        +businessDaysBetween() number}

3. Webpack 打包配置

// webpack.config.js
module.exports = {
  entry: './src/index.ts',
  output: {
    library: 'DateUtils',
    libraryTarget: 'umd'
  },
  module: {
    rules: [{
      test: /\.ts$/,
      use: 'ts-loader'
    }]
  }
}

4. 单元测试示例（Jest）

// date-utils.test.ts
describe('DateUtils', () => {test('formatISO should return YYYY-MM-DD', () => {expect(formatISO(new Date(2023,0,1)))
      .toBe('2023-01-01');
  });
});

生产级优化

依赖树优化

// package.json
{
  "peerDependencies": {"moment": ">2.0.0"},
  "sideEffects": false
}

按需加载方案

// 动态导入
import('@skills/date-utils').then(module => {module.formatDate(new Date());
});

避坑指南

1. 循环依赖 ：
2. 使用 Dependency Cruiser 分析

3. 重构为单向依赖

4. 类型声明 ：

   tsc --declaration --emitDeclarationOnly

5. CI/CD 流程 ：

   # .github/workflows/publish.yml
   steps:
     - run: npm test
     - run: npm publish --access public
       if: github.ref == 'refs/tags/v*'

思考与延伸

当设计技能包 API 时，建议：

1. 通过配置参数提供扩展点
2. 保留核心逻辑的纯净性
3. 使用适配器模式兼容不同业务场景

您如何看待通用组件与业务逻辑的边界划分？欢迎在评论区分享实践心得。