技术笔记技术笔记
首页
前言
  • CSS
  • JQuery
  • JavaScript
  • PHP
  • GoLang
Mysql
运维
Linux
  • Sublime Text 3
  • PhpStorm
  • Markdown
  • Git
  • Vim
  • MAC命令
  • Eclipse插件
  • Content-Type
  • 公务员职级体系
  • Eclipse插件
  • Content-Type
  • Web工具
  • 技术资源分享
首页
前言
  • CSS
  • JQuery
  • JavaScript
  • PHP
  • GoLang
Mysql
运维
Linux
  • Sublime Text 3
  • PhpStorm
  • Markdown
  • Git
  • Vim
  • MAC命令
  • Eclipse插件
  • Content-Type
  • 公务员职级体系
  • Eclipse插件
  • Content-Type
  • Web工具
  • 技术资源分享
  • js

    • 首页
    • 前端常用包管理命令
    • runapi

前端开发中常用的命令和工具包括 npm 和 Vite,它们在前端项目中扮演着重要角色。以下是对它们的详细介绍,包括常用命令参数、使用场景、优缺点等。


1. npm(Node Package Manager)

npm 是 Node.js 的包管理工具,用于安装、管理和发布 JavaScript 包。

常用命令

  • 初始化项目
    npm init
    

创建一个 package.json 文件,记录项目的依赖和配置。

  • 镜像源

    npm config ls -l
    npm config set registry https://registry.npmmirror.com/
    npm config set registry=https://mirrors.cloud.tencent.com/npm/
    npm config set registry https://registry.npm.taobao.org/
    
  • 更新npm版本

    npm install -g npm
    
  • node版本

    先清除npm缓存:npm cache clean -f
    然后安装n模块:npm install -g n
    升级node.js到最新稳定版:n stable
    升级node.js到最新版:n latest
    
  • 安装包

    npm install <package-name> --save
    

安装指定包到 node_modules 目录,并将其添加到 package.json 的 dependencies 中

  • 安装开发依赖(devDependencies):

    npm install <package-name> --save-dev
    // -S 是 --save 的缩写
    // -D 是 --save-dev 的缩写
    
  • 全局安装:

    npm install -g <package-name>
    
  • 卸载包

    npm uninstall <package-name>
    
  • 更新包

    npm update <package-name>
    
  • 运行脚本

    npm run <script-name>
    

    运行 package.json 中定义的脚本,例如:

    "scripts": {
      "start": "vite",
      "build": "vite build"
    }
    
  • 查看已安装的包及版本和检查是否存在冲突

    npm ls
    npm list
    
  • 清理缓存

    npm cache clean --force
    

使用场景

  • 管理项目依赖。
  • 运行构建、测试、启动等脚本。
  • 发布自己的包到 npm 仓库。

优缺点

  • 优点:
    • 生态丰富,几乎所有的 JavaScript 库都支持 npm。
    • 简单易用,社区支持强大。
  • 缺点:
    • 依赖安装速度较慢(尤其是嵌套依赖)。
    • 依赖管理可能不够严格,容易出现版本冲突。

各版本符号说明

  • major:主版本号
  • minor:次版本号
  • patch:补丁号
  • premajor:预备主版本
  • prepatch:预备次版本
  • prerelease:预发布版本
示例说明
~1.2.3主版本+次要版本+补丁版本;1.2.3 <= version < 1.3.0;
~1.2主版本+次要版本;1.2.0 <= version < 1.3.0
~1主版本;1.0.0 <= version < 2.0.0
符号示例范围说明
1.0.01.0.0锁定1.0.0版本,必须这个版本。
^会匹配最新的大版本依赖包^1.2.3、^0.2.3>=1.2.3 <2.0.0、>=0.2.3 <0.3.0表示安装1.x.x的最新版本(不低于1.2.3,包括1.3.0),但是不安装2.x.x,也就是说安装时不改变大版本号。需要注意的是,如果大版本号为0,则插入号的行为与波浪号相同,这是因为此时处于开发阶段,即使是次要版本号变动,也可能带来程序的不兼容。(主版本)
~会匹配最近的小版本依赖包~1.2.3>=1.2.3 <1.3.0表示安装1.2.x的最新版本(不低于1.2.3),但是不安装1.3.x,也就是说安装时不改变大版本号和次要版本号。
>=>=2.1.0>=2.1.0大于等于2.1.0
<=<=2.0.0<=2.0.0小于等于2.0.0
lastest安装最新的版本
*>=0.0.0任何版本
-1.2.3 - 2.3.4>=1.2.3 <=2.3.4

2. Vite

Vite 是一个现代化的前端构建工具,专注于开发环境的快速启动和生产环境的高效构建。

常用命令

  • 创建项目

    npm create vite@latest
    

    通过交互式命令行创建一个新的 Vite 项目。

  • 启动开发服务器

    npm run dev
    

    启动开发服务器,支持热更新(HMR)。

  • 构建生产环境代码

    npm run build
    

    将项目打包为生产环境代码,输出到 dist 目录。

  • 预览生产环境代码

    npm run preview
    

    本地预览构建后的生产环境代码。

常用配置参数

  • 开发服务器端口

    vite --port 3000
    

    指定开发服务器的端口。

  • 自定义配置文件

    vite --config my-config.js
    

    使用自定义的配置文件。

使用场景

  • 快速启动开发环境,适合现代前端框架(如 Vue、React、Svelte)。
  • 构建高性能的生产环境代码。

优缺点

  • 优点:
    • 开发环境启动速度快(基于原生 ES 模块)。
    • 支持热更新(HMR),开发体验好。
    • 生产环境构建优化(基于 Rollup)。
  • 缺点:
    • 对旧版浏览器的支持需要额外配置(如 polyfill)。
    • 生态相对较新,部分插件可能不够成熟。

3. 其他常用命令

npx

npx 是 npm 5.2.0 引入的工具,用于临时安装并运行包。

  • 运行本地或远程包
    npx <package-name>
    
    例如:
    npx create-react-app my-app
    

yarn

yarn 是另一个流行的包管理工具,与 npm 类似,但具有更快的安装速度和更好的依赖管理。

  • 初始化项目

    yarn init
    
  • 安装包

    yarn add <package-name>
    
  • 运行脚本

    yarn <script-name>
    

pnpm

pnpm 是一个高效的包管理工具,通过硬链接和符号链接减少磁盘空间占用。

  • 安装包
    pnpm add <package-name>
    

总结

  • npm:最常用的包管理工具,适合管理项目依赖和运行脚本。
  • Vite:现代化的构建工具,适合快速开发和高效构建。
  • yarn/pnpm:npm 的替代品,提供更快的安装速度和更好的依赖管理。
最近更新: 2025/12/20 10:59
Contributors: yanfu, hqdxhyf
Prev
首页
Next
runapi