高级 NPM 使用技巧：构建大型项目的实践经验

// ❌ 导入整个 lodash 库（~70KB gzipped）
import _ from 'lodash'
const result = _.debounce(fn, 300)

// ❌ 即使按需解构，仍然导入整个模块
import { debounce } from 'lodash'

// ✅ 只导入需要的函数（~2KB gzipped）
import debounce from 'lodash/debounce'

// ✅ 使用支持 Tree Shaking 的替代库
import { debounce } from 'lodash-es'

// ✅ 使用专门的按需导入插件
import { debounce } from 'lodash'  // 配合 babel-plugin-lodash

// .babelrc
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "lib",
      "style": true
    }],
    ["import", {
      "libraryName": "lodash",
      "libraryDirectory": "",
      "camel2DashComponentName": false
    }, "lodash"]
  ]
}

// rollup.config.js
export default {
  input: 'src/index.js',
  external: ['react', 'react-dom'],
  output: [
    {
      file: 'dist/index.cjs.js',
      format: 'cjs',
      exports: 'named'
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm'
    }
  ],
  plugins: [
    resolve(),
    babel({
      exclude: 'node_modules/**',
      presets: [
        ['@babel/preset-env', { modules: false }]  // 保持 ES modules
      ]
    }),
    terser()  // 启用代码压缩
  ]
}

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import babel from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'
import typescript from '@rollup/plugin-typescript'

const pkg = require('./package.json')

const banner = `/**
 * ${pkg.name} v${pkg.version}
 * (c) 2023-${new Date().getFullYear()} ${pkg.author}
 * Released under the ${pkg.license} License.
 */`

export default [
  // ESM build
  {
    input: 'src/index.ts',
    external: Object.keys(pkg.peerDependencies || {}),
    output: {
      file: 'dist/index.esm.js',
      format: 'esm',
      banner
    },
    plugins: [
      typescript({ declaration: true, outDir: 'dist' }),
      resolve(),
      babel({ babelHelpers: 'bundled' })
    ]
  },
  
  // CommonJS build
  {
    input: 'src/index.ts',
    external: Object.keys(pkg.dependencies || {}),
    output: {
      file: 'dist/index.cjs.js',
      format: 'cjs',
      exports: 'named',
      banner
    },
    plugins: [
      typescript(),
      resolve(),
      commonjs(),
      babel({ babelHelpers: 'bundled' })
    ]
  },
  
  // UMD build
  {
    input: 'src/index.ts',
    output: {
      file: 'dist/index.umd.js',
      format: 'umd',
      name: 'MyLibrary',
      banner
    },
    plugins: [
      typescript(),
      resolve(),
      commonjs(),
      babel({ babelHelpers: 'bundled' })
    ]
  },
  
  // UMD minified build
  {
    input: 'src/index.ts',
    output: {
      file: 'dist/index.umd.min.js',
      format: 'umd',
      name: 'MyLibrary'
    },
    plugins: [
      typescript(),
      resolve(),
      commonjs(),
      babel({ babelHelpers: 'bundled' }),
      terser()
    ]
  }
]

// scripts/verify-build.js
const fs = require('fs')
const path = require('path')

const distDir = path.join(__dirname, '..', 'dist')
const expectedFiles = [
  'index.esm.js',
  'index.cjs.js', 
  'index.umd.js',
  'index.umd.min.js',
  'index.d.ts'
]

console.log('🔍 验证构建产物...')

expectedFiles.forEach(file => {
  const filePath = path.join(distDir, file)
  if (fs.existsSync(filePath)) {
    const stats = fs.statSync(filePath)
    console.log(`✅ ${file} (${(stats.size / 1024).toFixed(2)}KB)`)
  } else {
    console.log(`❌ ${file} 缺失`)
    process.exit(1)
  }
})

console.log('✅ 所有构建产物验证通过')

// package.json
{
  "size-limit": [
    {
      "path": "dist/index.esm.js",
      "limit": "10 KB"
    },
    {
      "path": "dist/index.cjs.js", 
      "limit": "12 KB"
    },
    {
      "path": "dist/index.umd.min.js",
      "limit": "15 KB"
    }
  ],
  "scripts": {
    "size": "size-limit",
    "size:why": "size-limit --why"
  }
}

// scripts/size-monitor.js
const sizeLimit = require('size-limit')
const pkg = require('../package.json')

async function checkSize() {
  const results = await sizeLimit(pkg['size-limit'])
  
  results.forEach(result => {
    if (result.size > result.limit) {
      console.error(`❌ ${result.path} 超出体积限制：${result.size} > ${result.limit}`)
      process.exit(1)
    } else {
      const usage = ((result.size / result.limit) * 100).toFixed(1)
      console.log(`✅ ${result.path}: ${result.size} (${usage}% of limit)`)
    }
  })
}

checkSize()

// webpack.config.js - 支持符号链接的配置
module.exports = {
  resolve: {
    symlinks: false,  // 禁用符号链接解析，提升性能
    alias: {
      '@company/utils': path.resolve(__dirname, '../packages/utils/src')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, '../packages')  // 包含本地包源码
        ],
        use: 'babel-loader'
      }
    ]
  }
}

// scripts/check-duplicates.js
const fs = require('fs')
const path = require('path')

function findDuplicates(dir = 'node_modules', depth = 0, duplicates = {}) {
    if (depth > 3) return duplicates  // 限制递归深度
    
    try {
        const entries = fs.readdirSync(dir)
        
        entries.forEach(entry => {
            if (entry.startsWith('.') || entry.startsWith('@')) return
            
            const entryPath = path.join(dir, entry)
            const packagePath = path.join(entryPath, 'package.json')
            
            if (fs.existsSync(packagePath)) {
                const pkg = JSON.parse(fs.readFileSync(packagePath, 'utf8'))
                const key = pkg.name
                
                if (!duplicates[key]) {
                    duplicates[key] = []
                }
                
                duplicates[key].push({
                    version: pkg.version,
                    path: entryPath
                })
            }
            
            // 递归查找嵌套 node_modules
            const nestedModules = path.join(entryPath, 'node_modules')
            if (fs.existsSync(nestedModules)) {
                findDuplicates(nestedModules, depth + 1, duplicates)
            }
        })
    } catch (error) {
        // 忽略权限错误
    }
    
    return duplicates
}

const duplicates = findDuplicates()

console.log('🔍 重复依赖检查结果：\n')

Object.entries(duplicates).forEach(([name, versions]) => {
    if (versions.length > 1) {
        console.log(`📦 ${name}:`)
        versions.forEach(({ version, path }) => {
            console.log(`  - v${version} (${path})`)
        })
        console.log()
    }
})

// scripts/emergency-response.js
const { execSync } = require('child_process')
const https = require('https')

class EmergencyResponse {
    constructor(packageName, slackWebhook) {
        this.packageName = packageName
        this.slackWebhook = slackWebhook
    }
    
    async rollback(targetVersion, reason) {
        try {
            console.log(`🚨 开始应急回滚 ${this.packageName} -> ${targetVersion}`)
            
            // 执行回滚
            execSync(`npm dist-tag add ${this.packageName}@${targetVersion} latest`)
            
            // 发送通知
            await this.notify(`🚨 紧急回滚通知`, {
                package: this.packageName,
                version: targetVersion,
                reason: reason,
                time: new Date().toISOString()
            })
            
            console.log('✅ 应急回滚完成')
            
        } catch (error) {
            console.error('❌ 回滚失败:', error.message)
            await this.notify(`❌ 回滚失败`, { error: error.message })
            throw error
        }
    }
    
    async notify(title, data) {
        if (!this.slackWebhook) return
        
        const payload = {
            text: title,
            attachments: [{
                color: 'danger',
                fields: Object.entries(data).map(([key, value]) => ({
                    title: key,
                    value: value,
                    short: true
                }))
            }]
        }
        
        return new Promise((resolve, reject) => {
            const req = https.request(this.slackWebhook, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            }, resolve)
            
            req.on('error', reject)
            req.write(JSON.stringify(payload))
            req.end()
        })
    }
}

// 使用示例
const emergency = new EmergencyResponse(
    process.env.PACKAGE_NAME,
    process.env.SLACK_WEBHOOK
)

if (require.main === module) {
    const [,, targetVersion, reason] = process.argv
    emergency.rollback(targetVersion, reason || 'Emergency rollback')
}

module.exports = EmergencyResponse

// scripts/health-monitor.js
const semver = require('semver')

class PackageHealthMonitor {
    constructor(packageName) {
        this.packageName = packageName
    }
    
    async checkHealth() {
        const info = await this.getPackageInfo()
        const issues = []
        
        // 检查是否有废弃版本作为 latest
        if (info.deprecated) {
            issues.push({
                severity: 'critical',
                message: `Latest version is deprecated: ${info.deprecated}`
            })
        }
        
        // 检查版本号是否合理
        const versions = Object.keys(info.versions)
        const latest = info['dist-tags'].latest
        
        if (!semver.eq(latest, semver.maxSatisfying(versions, '*'))) {
            issues.push({
                severity: 'warning',
                message: `Latest tag (${latest}) is not the highest version`
            })
        }
        
        return {
            healthy: issues.length === 0,
            issues: issues
        }
    }
    
    async getPackageInfo() {
        const { execSync } = require('child_process')
        const output = execSync(`npm view ${this.packageName} --json`, { encoding: 'utf8' })
        return JSON.parse(output)
    }
}