author: 专注前端开发分享JavaScript干货title: JavaScript工程化①npm_yarn_pnpm包管理器现代前端必备update: 2026-04-28tags: JavaScript,npm,yarn,pnpm,包管理,前端工程化,依赖管理作者专注前端开发分享JavaScript干货更新时间2026年4月适合人群掌握JS基础想学习现代前端工程化工具的开发者前言为什么需要包管理器现代前端开发离不开第三方库React、Vue、Webpack等。包管理器用来安装、更新、删除这些依赖并管理版本和依赖关系。一、npmNode Package Manager1.1 初始化项目# 初始化项目生成 package.jsonnpminitnpminit-y# 跳过问答使用默认值package.json核心字段{name:my-project,version:1.0.0,description:项目描述,main:index.js,scripts:{start:node index.js,build:webpack --mode production},dependencies:{express:^4.18.2},devDependencies:{webpack:^5.88.0}}1.2 安装依赖# 安装项目依赖生产依赖npminstallexpressnpmi express# 简写npmi express4.17.0# 指定版本# 安装开发依赖只在开发环境使用npmi webpack --save-devnpmi webpack-D# 简写# 全局安装命令行工具npmi-gtypescript# 从 package.json 安装所有依赖npminstallnpmi# 简写二、yarnFacebook 出品# 安装 yarnnpmi-gyarn# 初始化yarninit-y# 安装依赖yarnaddexpressyarnaddwebpack--dev# 开发依赖yarnglobaladdtypescript# 全局安装# 从 yarn.lock 安装yarninstallyarn# 简写# 更新与卸载yarnupgrade expressyarnremove express三、pnpm高性能节省磁盘空间# 安装 pnpmnpmi-gpnpm# 初始化pnpminit# 安装依赖pnpmaddexpresspnpmaddwebpack-D# 开发依赖pnpmadd-gtypescript# 全局安装# 安装所有依赖pnpminstallpnpmi# 简写# 更新与卸载pnpmupdate expresspnpmremove express3.2 pnpm 的优势特性npmyarnpnpm安装速度一般快最快磁盘空间每个项目独立每个项目独立共享依赖节省空间依赖隔离❌✅✅四、scripts 脚本{scripts:{start:node index.js,dev:nodemon index.js,build:webpack --mode production,test:jest,lint:eslint src/**/*.js}}# 运行脚本npmrun startnpmstart# start、stop、test、restart 可省略 runnpmrun build# yarn / pnpm 类似yarnstartpnpmbuild五、语义化版本SemVer版本号主版本.次版本.修订号如2.3.1符号含义示例解释^允许更新次版本和修订号^2.3.12.3.1 3.0.0~只允许更新修订号~2.3.12.3.1 2.4.0无前缀精确版本2.3.1仅2.3.1六、知识卡命令npmyarnpnpm初始化npm init -yyarn init -ypnpm init安装依赖npm i pkgyarn add pkgpnpm add pkg开发依赖npm i pkg -Dyarn add pkg -Dpnpm add pkg -D全局安装npm i -g pkgyarn global add pkgpnpm add -g pkg卸载npm un pkgyarn remove pkgpnpm remove pkg安装所有npm iyarnpnpm i七、课后作业用 npm 初始化一个项目安装lodash和axios配置淘宝镜像源比较安装速度写一个package.json包含start、dev、build三个脚本有问题欢迎评论区留言大家一起讨论标签JavaScript | npm | yarn | pnpm | 包管理 | 前端工程化 | 依赖管理
JavaScript工程化①｜npm_yarn_pnpm包管理器，现代前端必备
author: 专注前端开发分享JavaScript干货title: JavaScript工程化①npm_yarn_pnpm包管理器现代前端必备update: 2026-04-28tags: JavaScript,npm,yarn,pnpm,包管理,前端工程化,依赖管理作者专注前端开发分享JavaScript干货更新时间2026年4月适合人群掌握JS基础想学习现代前端工程化工具的开发者前言为什么需要包管理器现代前端开发离不开第三方库React、Vue、Webpack等。包管理器用来安装、更新、删除这些依赖并管理版本和依赖关系。一、npmNode Package Manager1.1 初始化项目# 初始化项目生成 package.jsonnpminitnpminit-y# 跳过问答使用默认值package.json核心字段{name:my-project,version:1.0.0,description:项目描述,main:index.js,scripts:{start:node index.js,build:webpack --mode production},dependencies:{express:^4.18.2},devDependencies:{webpack:^5.88.0}}1.2 安装依赖# 安装项目依赖生产依赖npminstallexpressnpmi express# 简写npmi express4.17.0# 指定版本# 安装开发依赖只在开发环境使用npmi webpack --save-devnpmi webpack-D# 简写# 全局安装命令行工具npmi-gtypescript# 从 package.json 安装所有依赖npminstallnpmi# 简写二、yarnFacebook 出品# 安装 yarnnpmi-gyarn# 初始化yarninit-y# 安装依赖yarnaddexpressyarnaddwebpack--dev# 开发依赖yarnglobaladdtypescript# 全局安装# 从 yarn.lock 安装yarninstallyarn# 简写# 更新与卸载yarnupgrade expressyarnremove express三、pnpm高性能节省磁盘空间# 安装 pnpmnpmi-gpnpm# 初始化pnpminit# 安装依赖pnpmaddexpresspnpmaddwebpack-D# 开发依赖pnpmadd-gtypescript# 全局安装# 安装所有依赖pnpminstallpnpmi# 简写# 更新与卸载pnpmupdate expresspnpmremove express3.2 pnpm 的优势特性npmyarnpnpm安装速度一般快最快磁盘空间每个项目独立每个项目独立共享依赖节省空间依赖隔离❌✅✅四、scripts 脚本{scripts:{start:node index.js,dev:nodemon index.js,build:webpack --mode production,test:jest,lint:eslint src/**/*.js}}# 运行脚本npmrun startnpmstart# start、stop、test、restart 可省略 runnpmrun build# yarn / pnpm 类似yarnstartpnpmbuild五、语义化版本SemVer版本号主版本.次版本.修订号如2.3.1符号含义示例解释^允许更新次版本和修订号^2.3.12.3.1 3.0.0~只允许更新修订号~2.3.12.3.1 2.4.0无前缀精确版本2.3.1仅2.3.1六、知识卡命令npmyarnpnpm初始化npm init -yyarn init -ypnpm init安装依赖npm i pkgyarn add pkgpnpm add pkg开发依赖npm i pkg -Dyarn add pkg -Dpnpm add pkg -D全局安装npm i -g pkgyarn global add pkgpnpm add -g pkg卸载npm un pkgyarn remove pkgpnpm remove pkg安装所有npm iyarnpnpm i七、课后作业用 npm 初始化一个项目安装lodash和axios配置淘宝镜像源比较安装速度写一个package.json包含start、dev、build三个脚本有问题欢迎评论区留言大家一起讨论标签JavaScript | npm | yarn | pnpm | 包管理 | 前端工程化 | 依赖管理
