Dependency management specification

The Necessity of Engineering Standards

Modern front-end development has long moved beyond the simple combination of HTML+CSS+JS, with project complexity growing exponentially. Engineering standards have become the foundation for team collaboration, addressing typical issues such as chaotic code styles, dependency conflicts, and inefficient builds. A typical React project may contain 2,000+ dependency packages, and without proper dependency management, the node_modules folder can balloon to over 1GB.

Core Principles of Dependency Management

Version Locking Mechanism

package-lock.json or yarn.lock must be included in version control—this is the baseline for ensuring consistency across team environments. Example showing lock file differences:

// Bad practice: Version range too broad  
"dependencies": {  
  "lodash": "^4.17.0"  
}  

// Recommended practice: Exact version  
"dependencies": {  
  "lodash": "4.17.21"  
}  

Dependency Classification

Clearly distinguish between dependencies, devDependencies, peerDependencies, and optionalDependencies:

• Production dependencies: Frameworks like React, Vue
• Development dependencies: Build tools like Webpack, Vite
• Peer dependencies: Plugins like babel-plugin-import
• Optional dependencies: Platform-specific dependencies like node-sass

Best Practices for Dependency Installation

Precise Installation Strategy

Use npm install --save-exact or yarn add --exact to ensure exact versions:

# Incorrect approach  
npm install axios  

# Correct approach  
npm install axios@1.3.4 --save-exact  

Dependency Update Process

1. Check outdated dependencies with npm outdated
2. Update selectively: npm update package-name@version
3. Submit lock file changes after compatibility verification

Engineering Toolchain Configuration

ESLint Integration

Configure the import/no-extraneous-dependencies rule in .eslintrc:

module.exports = {  
  rules: {  
    'import/no-extraneous-dependencies': ['error', {  
      devDependencies: ['**/*.test.js', '**/*.spec.js'],  
      optionalDependencies: false,  
      peerDependencies: false  
    }]  
  }  
}  

Dependency Analysis Tools

Use npm ls to analyze the dependency tree or specialized tools:

# Check duplicate dependencies  
npm dedupe  

# Visual analysis  
npx depcheck  

Multi-Package Management Solutions

Monorepo Practices

Use Lerna or Yarn Workspaces for multi-package projects:

// package.json  
{  
  "private": true,  
  "workspaces": ["packages/*"]  
}  

// lerna.json  
{  
  "version": "independent",  
  "npmClient": "yarn"  
}  

Version Release Strategies

• Fixed versioning: Synchronized upgrades for all packages
• Independent versioning: Upgrades on a per-package basis
• Pre-release tags: next/beta/alpha

Dependency Security Audits

Vulnerability Scanning

Integrate npm audit or third-party tools:

# Auto-fix  
npm audit fix --force  

# Generate reports  
npx audit-ci --moderate  

Supply Chain Security

1. Configure .npmrc to enable signature verification:

sign-git-commit=true  
sign-git-tag=true  

2. Use CI to verify dependency integrity:

# GitHub Actions example  
- name: Verify dependencies  
  run: |  
    npm ci  
    git diff --exit-code package-lock.json  

Custom Dependency Resolution

Alias Configuration

Handle dependency path issues in Webpack:

resolve: {  
  alias: {  
    '@components': path.resolve(__dirname, 'src/components/'),  
    'old-pkg': 'new-pkg/dist/module.js'  
  }  
}  

Patching Solutions

Modify third-party dependencies with patch-package:

1. Edit source code in node_modules
2. Generate patch files:

npx patch-package package-name  

3. Automatically apply patches in postinstall

Performance Optimization Strategies

Dependency Splitting

Reduce initial load with dynamic imports:

// Static import  
import moment from 'moment';  

// Dynamic import  
const moment = await import('moment');  

Externalization Configuration

Exclude large libraries from bundles:

// webpack.config.js  
externals: {  
  react: 'React',  
  'react-dom': 'ReactDOM'  
}  

Environment-Specific Handling

Conditional Dependencies

Load different dependencies based on environment variables:

const analytics = process.env.NODE_ENV === 'production'  
  ? require('analytics-prod')  
  : require('analytics-dev');  

Platform Detection

Declare platform-specific dependencies in package.json:

{  
  "os": ["darwin", "linux"],  
  "cpu": ["x64", "arm64"]  
}  

Documentation and Automation

Dependency Change Logging

Record major dependency updates in CHANGELOG.md:

## [1.2.0] - 2023-05-20  
### Dependencies  
- Upgraded React from 18.1.0 to 18.2.0 (BREAKING CHANGE)  
- Added vite-plugin-svg-icons as new devDependency  

CI Integration

GitHub Actions automation example:

name: Dependency Check  
on: [pull_request]  
jobs:  
  audit:  
    runs-on: ubuntu-latest  
    steps:  
      - uses: actions/checkout@v3  
      - run: npm ci  
      - run: npm audit --audit-level=critical