npm scripts 与 npx 的使用

🎯 引言

学会这篇文章，你将掌握 npm scripts 和 npx 这两个非常实用的能力。它们能帮你把复杂的命令变成简单的一句 npm run xxx，也能让你无需全局安装就能运行任意 NPM 包。

🧱 什么是 npm scripts

npm scripts 是写在 package.json 里的脚本命令集合。它的作用是把开发中常用的长命令，封装成简短、好记的指令。

比如：

{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    }
}

执行时只需要：

npm run dev
npm run build
npm run preview

✨ 常用脚本写法

运行多个命令

有时候一个脚本需要执行多个步骤，可以用 && 或 &：

{
    "scripts": {
        "build-and-preview": "npm run build && npm run preview",
        "lint-and-format": "eslint . && prettier --write ."
    }
}

• &&：前一个命令成功后，才执行下一个。
• &：同时并行执行多个命令。

引用其他脚本

在 scripts 中可以用 npm run 脚本名 来调用其他脚本：

{
    "scripts": {
        "clean": "rm -rf dist",
        "build": "npm run clean && vite build"
    }
}

特殊脚本

有两个脚本可以不用加 run：

npm start    # 对应 scripts.start
npm test     # 对应 scripts.test

🧰 环境变量与生命周期

环境变量

在脚本中，可以用 process.env.npm_package_xxx 访问 package.json 中的字段。例如：

{
    "name": "my-app",
    "version": "1.0.0",
    "scripts": {
        "info": "node -e \"console.log(process.env.npm_package_name)\""
    }
}

执行 npm run info 会输出 my-app。

生命周期脚本

NPM 在某些时刻会自动执行特定脚本，比如：

{
    "scripts": {
        "postinstall": "nuxt prepare"
    }
}

postinstall 会在 npm install 执行完毕后自动运行，常用于项目初始化准备。

🚀 什么是 npx

npx 是 NPM 5.2.0 之后自带的命令行工具，它的作用是临时执行某个 NPM 包，而不需要全局安装。

临时运行远程包

比如你想快速创建一个 Vite 项目：

npx create-vite@latest

执行后，create-vite 会被下载到临时目录并运行，用完即走，不会污染你的全局环境。

运行本地安装的包

很多工具虽然安装到了 node_modules/.bin，但命令行默认找不到它们。用 npx 可以直接调用：

npx eslint .
npx prettier --write .

⚖️ npm scripts 与 npx 的区别

🧾 小节总结

• npm scripts 用于封装常用命令，执行时用 npm run 脚本名。
• npm start 和 npm test 是特殊脚本，可以直接运行。
• npx 可以临时执行远程或本地安装的包，避免全局污染。
• 生命周期脚本如 postinstall 可在特定时机自动执行。

❓ 知识问答

Q1：npm run build 和直接运行 vite build 有什么区别？

A：npm run build 会调用 package.json 中定义的脚本，确保使用的是项目安装的版本；直接运行可能调用的是全局版本，版本不一致容易出错。

Q2：npx 和全局安装有什么区别？

A：全局安装会长期占用系统环境；npx 是临时下载或调用本地包，执行完即可释放，更干净。

Q3：&& 和 & 在脚本中有什么区别？

A：&& 是顺序执行，前一个成功才执行后一个；& 是并行执行，多个命令同时跑。

Q4：postinstall 脚本什么时候执行？

A：在 npm install 安装完所有依赖后自动执行，常用于生成类型声明、准备运行环境等。

🧪 小练习

在你的 npm-demo 项目中完成以下任务：

1. 在 package.json 中添加以下脚本：

{
    "scripts": {
        "hello": "node -e \"console.log('Hello from scripts')\"",
        "build": "echo '构建中...' && echo '构建完成'"
    }
}

2. 执行 npm run hello 和 npm run build，观察输出。
3. 尝试用 npx 运行一次 cowsay（一个趣味命令行工具）：

# 请在这里输入命令

🎉 恭喜你掌握了 npm scripts 和 npx！下一篇我们会学习如何发布自己的 NPM 包，以及切换镜像源加速下载。