npm script 配置：Husky、setup-dev.js

"prepare": "husky install"是什么意思

---

"prepare": "husky install" 是 package.json 文件中的一个 npm script 配置，用于自动安装 Husky（一个 Git 钩子管理工具）。

---

详细解释：

1. prepare 脚本的作用

• prepare 是一个特殊的 npm 生命周期脚本

• 它会在 npm install（或 yarn install）之后自动执行

• 也会在发布包之前执行（npm publish）

2. husky install 的功能

• husky install 会初始化 Husky 的 Git 钩子配置

• 它会在项目的 .git/hooks 目录中设置 Husky 的运行环境

• 使得项目中的 Git 钩子配置（通常在 .husky/ 目录下）能够生效

3. 典型的使用场景

在 package.json 中：

json

{
  "scripts": {
    "prepare": "husky install"
  },
  "devDependencies": {
    "husky": "^8.0.0"
  }
}

---

4. 为什么要这样配置？

• 自动化 ：当其他开发者克隆项目并运行 npm install 时，会自动设置好 Git 钩子

• 一致性：确保团队所有成员的 Git 钩子配置一致

• 便捷性 ：无需手动运行 husky install 命令

---

5. 实际效果

当执行以下操作时：

bash

npm install
# 或
yarn install

会自动执行：

bash

husky install

---

6. 配合 Husky 使用示例

通常还会配置预提交钩子（pre-commit）：

bash

# 创建 pre-commit 钩子
npx husky add .husky/pre-commit "npm run lint"

这样配置后，每次 git commit 时都会自动运行 lint 检查。

---

注意事项：

1. 需要 Git 仓库 ：项目必须已经初始化了 Git (git init)

2. Husky 版本：Husky 7+ 版本使用这种方式，旧版本（4.x）配置方式不同

3. 可选的替代方案 ：有些项目使用 postinstall 脚本，但 prepare 更标准

---

这种配置是现代前端项目中常见的代码质量保障实践的一部分，确保在提交代码前自动运行代码检查、测试等操作。

---

"prepare": "husky install", "prepare": "node scripts/setup-dev.js"

---

你在同一个 package.json 中定义了两次 prepare 脚本，这是不正确的！

npm 只允许每个脚本名称出现一次。

---

问题分析：

json

{
  "scripts": {
    "prepare": "husky install",          // ❌ 第一个 prepare
    "prepare": "node scripts/setup-dev.js" // ❌ 第二个 prepare（会覆盖第一个）
  }
}

---

解决方案：

方案1：合并两个命令（推荐）

json

{
  "scripts": {
    "prepare": "husky install && node scripts/setup-dev.js"
  }
}

或者使用跨平台的 npm-run-all：

json

{
  "scripts": {
    "prepare": "npm-run-all --sequential prepare:husky prepare:setup",
    "prepare:husky": "husky install",
    "prepare:setup": "node scripts/setup-dev.js"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}

---

方案2：如果一个是主要的，另一个可改为其他生命周期脚本

json

{
  "scripts": {
    "prepare": "husky install",
    "postinstall": "node scripts/setup-dev.js"
  }
}

• postinstall：在 npm install 完成后执行

• preinstall：在 npm install 之前执行

---

方案3：创建一个主脚本

json

{
  "scripts": {
    "prepare": "node scripts/prepare.js",
    "setup": "node scripts/setup-dev.js"
  }
}

---

在 scripts/prepare.js 中：

javascript

const { execSync } = require('child_process');

try {
  console.log('Setting up husky...');
  execSync('husky install', { stdio: 'inherit' });
  
  console.log('Running dev setup...');
  execSync('node scripts/setup-dev.js', { stdio: 'inherit' });
} catch (error) {
  console.error('Prepare script failed:', error);
  process.exit(1);
}

---

实际项目中的常见模式：

1. Husky + 其他初始化

json

{
  "scripts": {
    "prepare": "husky install",
    "postinstall": "npm run setup",
    "setup": "node scripts/setup.js"
  }
}

2. 条件性执行

json

{
  "scripts": {
    "prepare": "npm run setup:husky && npm run setup:dev",
    "setup:husky": "husky install",
    "setup:dev": "node scripts/setup-dev.js"
  }
}

3. 使用环境变量区分

json

{
  "scripts": {
    "prepare": "if [ \"$NODE_ENV\" != \"production\" ]; then husky install; fi && node scripts/setup.js"
  }
}

---

建议：

根据你的具体需求选择合适的方案：

• 如果两个都是必需的初始化步骤，使用 方案1（合并命令）

• 如果 husky install 是必须的，而 setup-dev.js 是可选的开发设置，使用 方案2

• 如果逻辑复杂，使用 方案3（自定义脚本）

---

"prepare": "node scripts/setup-dev.js" 是什么意思

---

"prepare": "node scripts/setup-dev.js" 是 一个 npm 生命周期脚本 ，它告诉 npm 在执行特定操作时运行指定的 Node.js 脚本。

---

详细解释：

1. prepare 脚本的特殊性

• prepare 是 npm 的生命周期脚本之一

• 它会在以下时机自动执行：

  1. 安装依赖后 ：npm install 或 yarn install 完成时

  2. 发布包前 ：npm publish 执行前

  3. 本地安装时 ：npm pack 或 npm link 时

---

2. 具体含义

json

{
  "scripts": {
    "prepare": "node scripts/setup-dev.js"
  }
}

意思是：

"当执行 npm install 时，安装完所有依赖后，自动运行 node scripts/setup-dev.js"

---

3. setup-dev.js 通常做什么？

scripts/setup-dev.js 通常是项目初始化脚本，可能包含：

常见的初始化任务：

javascript

// scripts/setup-dev.js 示例内容
const fs = require('fs');
const path = require('path');

console.log('🔧 正在设置开发环境...');

// 1. 创建必要的配置文件
if (!fs.existsSync('.env.local')) {
  fs.copyFileSync('.env.example', '.env.local');
  console.log('✅ 已创建 .env.local 文件');
}

// 2. 创建必要的目录
const dirs = ['logs', 'temp', 'uploads'];
dirs.forEach(dir => {
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir, { recursive: true });
    console.log(`✅ 已创建 ${dir} 目录`);
  }
});

// 3. 设置数据库或生成密钥
const crypto = require('crypto');
const secretKey = crypto.randomBytes(32).toString('hex');
console.log(`🔑 生成的应用密钥: ${secretKey}`);

// 4. 检查依赖或系统要求
const requiredNodeVersion = '16.0.0';
const currentNodeVersion = process.version;
console.log(`📦 Node.js 版本: ${currentNodeVersion}`);

// 5. 生成必要的证书或配置文件
const configTemplate = {
  apiUrl: 'http://localhost:3000',
  debug: true
};
fs.writeFileSync('config.dev.json', JSON.stringify(configTemplate, null, 2));

console.log('🎉 开发环境设置完成！');

---

4. 为什么使用 prepare 而不是 postinstall？

脚本	执行时机	特点
prepare	依赖安装过程中，包打包前	1. 保证在包发布前执行 2. 在本地开发时也会执行 3. 推荐用于构建/设置任务
postinstall	依赖安装完成后	1. 只在安装后执行 2. 不会在 npm pack 时执行 3. 适合用户级的设置

最佳实践 ：使用 prepare 来设置项目构建/开发环境，因为它更可靠。

---

5. 实际项目示例

示例1：Vue/React 项目设置

json

{
  "scripts": {
    "prepare": "node scripts/setup-dev.js",
    "dev": "vite",
    "build": "vite build"
  }
}

setup-dev.js 可能设置代理、生成 API 配置等。

---

示例2：后端项目设置

json

{
  "scripts": {
    "prepare": "node scripts/setup-dev.js",
    "start": "node server.js"
  }
}

---

setup-dev.js 可能：

• 设置数据库连接

• 生成 JWT 密钥

• 创建上传目录

---

示例3：Monorepo 项目

json

{
  "scripts": {
    "prepare": "node scripts/bootstrap.js",
    "dev": "lerna run dev --parallel"
  }
}

---

6. 与 Husky 的关系

如果你同时需要 Husky 和自定义设置：

json

{
  "scripts": {
    "prepare": "husky install && node scripts/setup-dev.js"
    // 或
    "prepare": "npm run setup:husky && npm run setup:dev",
    "setup:husky": "husky install",
    "setup:dev": "node scripts/setup-dev.js"
  }
}

---

7. 注意事项

1. 脚本位置 ：确保 scripts/setup-dev.js 文件存在且可执行

2. 错误处理：脚本应有适当的错误处理

3. 幂等性：脚本应该可以安全地多次运行（不会破坏已有配置）

4. 环境判断：可以在脚本中判断是开发环境还是生产环境

---

8. 调试

如果脚本有问题，可以手动运行：

bash

# 查看具体错误
node scripts/setup-dev.js

# 或使用调试模式
npm run prepare --verbose

总结 ："prepare": "node scripts/setup-dev.js" 是一种自动化项目初始化的常见模式，确保开发者在安装依赖后立即获得正确配置的开发环境。