npm包管理深度探索:从基础到进阶全面教程!

目录


一、npm概述

1、npm简介

在当代前端开发领域,npm(Node Package Manager,即Node包管理器)无疑是每位开发者不可或缺的工具。它不仅是一个用于管理Node.js依赖关系的工具,更是一个庞大的生态系统,支撑着百万的软件包。下面,我们将深入探讨npm的基本概念和功能。

(1)什么是npm?

npm是一个开源的代码库管理器,它允许开发者下载、安装、管理和更新JavaScript项目中的库和依赖项。npm与Node.js紧密集成,是Node.js默认的包管理工具。它提供了一个命令行界面(CLI),开发者可以通过这个界面执行各种操作,如安装软件包、管理项目依赖等。

(2)npm的核心功能

  • 依赖管理:npm能够自动处理项目依赖关系,确保所有依赖项都能正确安装。
  • 软件包管理:npm拥有一个庞大的软件包仓库,开发者可以轻松地查找、安装和使用他人的代码。
  • 控制:npm通过语义化版本控制(Semantic Versioning),帮助开发者管理软件包的版本。
  • 脚本执行:npm允许开发者定义和执行脚本,简化开发流程。

(3)npm的工作原理

npm的工作原理基于两个主要文件:package.jsonpackage-lock.json

  • package.json:这是一个JSON格式的文件,用于描述项目的元数据和项目依赖。每次安装新包时,npm都会更新这个文件。
  • package-lock.json:这个文件记录了项目的确切依赖版本,确保在不同环境中安装时能够获得相同的结果。

(4)npm的优势

  • 支持:npm拥有庞大的开发者社区,这意味着大多数常用的库和工具都可以在npm上找到。
  • 自动化:npm能够自动化依赖安装和管理,大大提高了开发效率。
  • 灵活性:npm允许开发者自定义脚本,以满足不同的开发需求。

(5)npm的局限性

尽管npm非常强大,但它也有一些局限性:

  • 安全性:由于npm软件包的数量庞大,有时可能包含恶意代码。
  • 性能问题:在大型项目中,npm的安装过程可能会变得缓慢。

(6)总结

npm作为Node.js生态系统的重要组成部分,为前端开发者提供了一个强大、灵活的包管理工具。通过npm,开发者可以轻松地管理项目依赖,共享和复用代码,从而加速开发过程。然而,开发者在使用npm时也应注意其潜在的安全风险,并采取相应的措施来保护项目的安全。

2、npm的发展历史

(1)npm的起源与早期发展

npm,即Node Package Manager,是随着Node.js的诞生而出现的。Node.js是由Ryan Dahl在2009年创建的服务器端JavaScript运行环境,它的出现为JavaScript的发展开启了新的篇章。在Node.js的早期版本中,并没有一个官方的包管理器,开发者需要手动管理项目依赖,这无疑是一项繁琐且容易出错的工作。

为了解决这一问题,Isaac Z. Schlueter在2010年创建了npm。npm的初衷是为Node.js提供一个标准化的包管理工具,以便开发者能够更轻松地共享和复用代码。npm的第一个版本(0.1.0)在2010年1月发布,标志着JavaScript生态系统中一个重要工具的诞生。

在随后的几年里,npm迅速发展,成为了Node.js生态系统不可或缺的一部分。它的包仓库npmjs.com也逐渐壮大,吸引了越来越多的开发者贡献自己的代码。

(2)npm的快速发展

随着Node.js的流行,npm的用户基础迅速扩大。2012年,npm的软件包数量超过了20,000个,到了2014年,这个数字已经增长到了超过100,000个。这种爆炸性的增长不仅反映了Node.js社区的活跃度,也展示了npm作为一个包管理工具的成功。

在这一时期,npm团队不断改进和优化npm的功能,包括:

  • 依赖管理 :npm引入了package.json文件,用于描述项目的依赖关系,这使得依赖管理变得更加自动化和可靠。
  • 版本控制:npm采用了语义化版本控制(Semantic Versioning),帮助开发者更好地理解和控制依赖包的版本。
  • 安全性:npm增加了对软件包的安全扫描功能,以保护用户免受恶意代码的影响。

(3)npm的里程碑事件

  • 2013年:npm团队推出了npm私有模块功能,允许企业用户在内部共享私有包。
  • 2015年 :npm 3.0发布,引入了npm shrinkwrap命令,用于锁定项目的依赖关系,确保在不同环境中的一致性。
  • 2016年:npm推出npm@next,这是一个实验性的版本,包含了未来版本的许多新特性和改进。
  • 2018年:npm 6.0发布,引入了自动更新依赖包的功能,以及改进的安全特性。
  • 2020年:npm 7.0发布,带来了多项重大更新,包括对Yarn的兼容性、改进的依赖关系解析等。

(4)npm的当前状态与未来展望

截至2023年,npm已经成为全球最大的软件包仓库,拥有超过100万个软件包。它的成功不仅推动了Node.js生态系统的繁荣,也为JavaScript开发者提供了一个强大的工具,以支持他们的开发工作。

展望未来,将继续致力于提高用户体验,增强安全性,以及扩展其功能。随着JavaScript在前端、后端和桌面应用中的广泛应用,npm的重要性只会继续增长。它将继续引领JavaScript生态系统的发展,为开发者提供更高效、更安全、更便捷的包管理解决方案。

3、npm的重要性

在当今的软件开发领域,Node.js和JavaScript的生态系统已经变得日益庞大和复杂。在这个生态系统中,npm(Node Package Manager)扮演了一个至关重要的角色。以下是npm的重要性体现在几个关键方面的详细探讨。

(1)统一的管理工具

在npm出现之前,JavaScript开发者需要手动管理项目中的依赖项,这不仅效率低下,而且容易出错。npm的诞生为开发者提供了一个统一的包管理工具,它能够自动处理依赖关系,确保所有依赖项都能正确安装和更新。这种自动化管理大大提高了开发效率,减少了人为错误。

(2)丰富的包资源

npm是世界上最大的软件包仓库,拥有超过100万个软件包。这些软件包涵盖了从Web开发框架到命令行工具,再到各种实用库的广泛范围。这种丰富的资源库使得开发者可以轻松地找到并集成他们需要的功能,从而加速开发。

(3)促进代码共享与复用

npm的核心价值之一是促进代码共享与复用。开发者可以将自己的代码打包成npm包,然后发布到npm仓库中,供其他开发者使用。这种模式极大地推动了JavaScript社区的协作和知识共享,使得优秀的代码可以被广泛传播和应用。

以下是npm重要性的几个具体体现:

  • 模块化开发:npm鼓励开发者采用模块化开发的方法,将功能划分为独立的模块。这不仅有助于代码的维护和管理,还使得功能可以被其他项目复用。
  • 自动化构建 :npm支持通过scripts字段在package.json中定义自定义脚本,这些脚本可以在特定的生命周期事件中自动执行,如安装依赖、启动服务器、测试代码等。
  • 依赖管理 :npm通过package.json文件管理项目的依赖关系,确保每次安装时都能获得正确的版本。此外,npm还支持锁定依赖版本,保证在不同环境中的一致性。

(4)安全性

随着JavaScript生态系统的扩大,安全问题日益突出。npm在这方面也做出了积极响应:

  • 安全扫描:npm提供了一个内置的安全扫描工具,可以帮助开发者检测项目中的已知漏洞,并提供修复建议。
  • 包签名:npm引入了包签名机制,确保开发者安装的软件包是由包的作者所发布,没有被篡改。

(5)生态系统整合

npm不仅仅是Node.js的包管理器,它还与许多其他工具和服务紧密集成,如:

  • 持续集成/持续部署(CI/CD):npm可以与CI/CD工具集成,自动化测试和部署流程。
  • 代码托管平台:npm与GitHub、GitLab等代码托管平台集成,使得从代码库到npm包的发布变得更加无缝。
  • 包管理工具:npm与其他包管理工具如arn、PNPM等兼容,为开发者提供了更多的选择。

(6)社区支持

npm拥有一个庞大的开发者社区,这个社区不仅贡献了大量的软件包,还提供了丰富的文档、教程和最佳实践。这种社区支持为开发者提供了学习和解决问题的宝贵资源。

总之,npm的重要性在于它为JavaScript开发者提供了一个强大、高效、安全的包管理工具。它不仅简化了开发流程,促进了代码共享与复用,还为整个JavaScript生态系统的繁荣发展奠定了坚实的基础。随着Node.js和JavaScript的持续流行,npm的重要性只会继续增长,成为每个JavaScript开发者不可或缺的工具之一。

二、npm安装与配置

1、环境搭建

在深入探索npm的世界之前,首先需要搭建一个合适的环境。以下是详细的环境搭建步骤,确保您能够顺利安装和使用npm。

(1)操作系统要求

npm是Node.js的一部分,因此它可以在任何支持Node.js的操作系统上运行。目前,npm支持以下操作系统:

  • Windows
  • macOS
  • Linux

确保您的操作系统已经更新到最新版本,以避免在安装或使用过程中遇到兼容性问题。

(2)安装Node.js

npm是Node.js的内置包管理器,因此,安装npm的第一步是安装Node.js。以下是不同操作系统上的安装步骤:

(3)配置环境变量

在某些情况下,您可能需要手动配置环境变量,以确保Node.js和npm可以在任何位置运行。以下是配置环境变量的步骤:

  • Windows:在系统属性中,点击"环境变量"按钮,然后在"系统变量"下找到并编辑"Path"变量。将Node.js的安装路径添加到变量值中。

  • macOS/Linux :打开终端,编辑~/.bashrc~/.zshrc文件,并在文件末尾添加以下行:

    bash 复制代码
    export PATH=$PATH:/usr/local/bin

    其中/usr/local/bin是Node.js的安装路径。保存文件后,运行source ~/.bashrcsource ~/.zshrc命令使变量生效。

(4)验证安装

安装完成后,可以通过以下命令验证Node.js和npm是否安装成功:

bash 复制代码
node -v
npm -v

如果返回了版本号,则表示安装成功。

(5)更新npm

npm会随着Node.js的更新而更新,但有时您可能需要手动更新npm。可以使用以下命令来更新:

bash 复制代码
npm install -g npm@latest

(6)使用nvm管理Node.js版本

如果您需要在项目中使用不同版本的Node.js,可以使用nvm(Node Version Manager)来管理多个版本的Node.js。nvm是一个Node.js版本控制工具,它允许您轻松切换不同版本的Node.js。

  • 安装nvm:在终端中运行以下命令安装nvm:

    bash 复制代码
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  • 使用nvm:安装nvm后,您可以使用以下命令安装、切换和卸载Node.js版本:

    bash 复制代码
    nvm install <version> # 安装指定版本的Node.js
    nvm use <version>     # 切换到指定版本的Node.js
    nvm uninstall <version> # 卸载指定版本的Node.js

通过以上步骤,您应该已经成功搭建了Node.js和npm的开发环境,可以开始使用npm来管理您的JavaScript项目了。

2、npm的安装

npm作为Node.js的内置包管理器,其安装过程通常与Node.js的安装一同进行。以下是详细的npm安装步骤和注意事项。

(1)Node.js与npm的关系

首先,需要明确的是,npm是Node.js的一部分。当您安装Node.js时,npm会自动安装到您的系统中。这意味着,您不需要单独安装npm,而是通过安装Node.js来获得npm。

(2)安装前的准备工作

在开始安装之前,请确保您的操作系统已经更新到最新版本,并且满足以下基本要求:

  • Windows:Windows 7或更高版本
  • macOS:macOS 10.13 High Sierra或更高版本
  • Linux:大多数Linux发行版都Node.js和npm

此外,确保您的计算机上已经安装了Python 2.x,因为Node.js的编译过程中可能需要它。

(3)安装Node.js和npm

以下是不同操作系统上安装Node.js和npm的详细步骤:

  • Windows

    1. 访问Node.js官方网站(https://nodejs.org/)。

    2. 下载适合您操作系统的Node.js安装程序(推荐下载LTS版本,即长期支持版本)。

    3. 运行安装程序,并遵循屏幕上的指示完成安装。

    4. 安装完成后,打开命令提示符(或PowerShell),输入以下命令验证安装:

      bash 复制代码
      node -v
      npm -v

      如果返回了版本号,则表示安装成功。

  • macOS

    1. 同样访问Node.js官方网站。
    2. 下载适用于macOS的Node.js安装程序。
      . 打开下载的.pkg文件,并按照屏幕上的指示完成安装。
    3. 安装完成后,打开终端,输入上述命令验证安装。
  • Linux

    1. 打开终端。

    2. 根据您的Linux发行版,使用以下命令之一安装Node.js和npm:

      对于基于Debian的系统(如Ubuntu):

      bash 复制代码
      sudo apt update
      sudo apt install nodejs npm

      对于基于Red Hat的系统(如Fedora):

      bash 复制代码
      sudo dnf install nodejs npm

      对于基于Arch的系统(如Manjaro):

      bash 复制代码
      sudo pacman -S nodejs npm
    3. 安装完成后,使用上述命令验证安装。

    4. 使用nvm进行安装

如果您需要在项目中使用不同版本的Node.js和npm,推荐使用nvm(Node Version Manager)进行安装和管理。以下是使用nvm安装Node.js和npm的步骤:

  • **安装nvm:

    1. 在终端中运行以下命令安装nvm:

      bash 复制代码
      curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

      或者,如果您使用的是Windows,可以下载nvm-windows版本。

    2. 安装脚本会自动将nvm安装到您的系统中,并到您的路径中。

  • 使用n安装Node.js和npm

    1. 使用以下命令安装您所需的Node.js版本:

      bash 复制代码
      nvm install <version>

      其中<version>是您希望安装的Node.js版本号。

    2. 使用以下命令切换到该版本:

      bash 复制代码
      nvm use <version>
    3. 使用以下命令查看已安装的Node.js版本:

      bash 复制代码
      nvm list
    4. 现在,您可以开始使用npm了。

    5. 验证npm的安装

安装完成后,可以通过以下命令验证npm是否安装成功:

bash 复制代码
npm -v

如果返回了版本号,则表示npm已经成功安装到您的系统中。

  1. 注意事项
  • 在安装过程中,确保您有足够的权限(在某些情况下可能需要使用sudo)。
  • 如果您在安装过程中遇到问题,可以查看Node.js和npm的官方文档,或者搜索社区中的解决方案。
  • 保持Node.js和npm的更新,以便您的项目能够利用最新的特性和安全修复。

通过以上步骤,您应该已经成功安装了Node.js和npm,并准备好开始使用npm来管理您的JavaScript项目了。

3、配置npm

在掌握了npm的安装方法之后,下一步便是配置npm,以确保其能够按照您的需求运行。配置npm涉及多个方面,包括设置代理、使用国内镜像源、配置用户信息等。以下是详细的npm配置指南。

(1)设置npm代理

由于网络环境的原因,某些情况下,直接使用npm可能会遇到下载速度缓慢或无法访问的问题。为了解决这个问题,可以通过设置npm代理来加速下载过程。

使用HTTP/HTTPS代理

如果您的网络环境需要HTTP或HTTPS代理,可以通过以下命令设置:

bash 复制代码
npm config set proxy http://<user>:<password>@<proxy-server>:<port>/
npm config set https-proxy http://<user>:<password>@<proxy-server>:<port>/

<user>, <password>, <proxy-server>, 和 <port> 替换为您的代理服务器的用户名、密码、地址和端口。

使用环境变量

您也可以通过设置环境变量来配置npm代理:

bash 复制代码
export HTTP_PROXY=http://<proxy-server>:<port>/
export HTTPS_PROXY=http://<proxy-server>:<port>/
恢复默认设置

如果您想恢复到默认的代理设置,可以使用以下命令:

bash 复制代码
npm config delete proxy
npm config delete https-proxy

(2)使用国内镜像源

为了提高下载速度,国内开发者通常会使用淘宝镜像源(cnpm)或其他国内镜像源。以下是如何配置国内镜像源的步骤:

使用淘宝镜像源

通过以下命令,您可以全局设置淘宝镜像源:

bash 复制代码
npm config set registry https://registry.npm.taobao.org/

或者,您可以使用cnpm工具,它是淘宝官方提供的npm镜像:

bash 复制代码
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装后,可以使用cnpm代替npm来安装包。

使用其他镜像源

除了淘宝镜像源,还有其他一些国内镜像源可供选择,例如:

  • https://npmreg mirror.com/
  • https://npmmirror.com/

您可以通过上述命令中的registry参数来设置您选择的镜像源。

恢复默认镜像源

如果您想恢复到npm的官方镜像源,可以使用以下命令:

bash 复制代码
npm config set registry https://registry.npmjs.org/

(3)配置用户信息

在使用npm进行包管理时,您可能需要配置用户信息,以便于执行登录、发布包等操作。

设置用户信息

通过以下命令,您可以设置npm的用户信息:

bash 复制代码
npm set user <username>
npm set email <email>

<username><email>替换为您的npm用户名和电子邮件地址。

查看当前配置

要查看当前的用户信息配置,可以使用以下命令:

bash 复制代码
npm config list

(4)配置npm缓存

npm默认会在本地缓存下载的包,以便于后续使用。您可以通过以下命令查看和设置缓存的大小:

bash 复制代码
npm config get cache --json
npm config set cache <path-to-cache-directory>

<path-to-cache-directory>替换为您希望存储缓存文件的路径。

(5)其他配置选项

npm提供了许多其他配置选项,以下是一些常用的配置:

  • prefix:设置全局安装包的目录。
  • loglevel:设置日志级别。
  • progress:是否显示下载进度条。

您可以通过npm config set <key> <value>命令来设置这些选项。

(6)总结

通过以上配置,您可以优化npm的使用体验,提高下载速度,并确保npm按照您的需求运行。记住,良好的配置习惯可以大大提高开发效率和项目管理的便捷性。在实际开发过程中,建议您根据项目需求和网络环境,合理配置npm。

三、npm常用命令

1、基础命令

在深入探索npm的强大功能之前,首先需要掌握一些基础命令。这些命令是日常开发中最为常用的,能够帮助您高效地管理项目依赖、执行脚本和进行版本控制。以下是npm基础命令的详细解读。

(1)npm install

npm install 是最常用的命令之一,用于安装项目依赖。当您在项目中运行此命令时,npm会读取package.json文件中的依赖列表,并自动下载和安装这些依赖。

  • 全局安装 :使用-g--global参数,可以将包安装为全局包,这意味着它可以在命令行任何地方使用。

    bash 复制代码
    npm install -g <package-name>
  • 本地安装 :如果不使用-g参数,包会被安装到当前项目的node_modules目录中,并且只在当前项目可用。

    bash 复制代码
    npm install <package-name>
  • 保存到package.json :使用--save-S参数,会将包添加到package.jsondependencies中。

    bash 复制代码
    npm install <package-name> --save
  • 保存为开发依赖 :使用--save-dev-D参数,会将包添加到package.jsondevDependencies中。

    bash 复制代码
    npm install <package-name> --save-dev

(2)npm uninstall

当您需要从项目中移除一个包时,可以使用npm uninstall命令。此命令会移除node_modules目录中的包,并更新package.json中的依赖列表。

  • 移除全局包 :使用-g参数移除全局安装的包。

    bash 复制代码
    npm uninstall -g <package-name>
  • 移除本地包 :如果不使用-g参数,将只移除本地安装的包。

    bash 复制代码
    npm uninstall <package-name>
  • 不更新package.json :使用--no-save参数,移除包但不清除package.json中的记录。

    bash 复制代码
    npm uninstall <package-name> --no-save

(3)npm update

随着时间的推移,项目依赖的包可能会发布新版本。使用npm update命令可以更新项目中的包到最新版本。

  • 更新所有包:在项目目录中运行此命令,将更新所有依赖包。

    bash 复制代码
    npm update
  • 更新特定包:指定包名,只更新该包。

    bash 复制代码
    npm update <package-name>

(4) npm outdated

在更新包之前,您可能想了解哪些包有更新的版本可用。npm outdated命令会列出所有过时的包及其当前版本和最新版本。

bash 复制代码
npm outdated

(5) npm list

npm listnpm ls 命令用于查看当前项目安装的所有包,包括它们的依赖关系。

  • 查看全局安装的包 :使用-g参数查看全局安装的包。

    bash 复制代码
    npm list -g
  • 查看特定包:指定包名,查看该包的详细信息。

    bash 复制代码
    npm list <package-name>

(6)npm init

当您创建一个新项目时,可以使用npm init命令来创建一个package.json文件。此命令会引导您填写一些关于项目的基本信息,如名称、版本、描述等。

  • 快速创建 :使用-y参数,将自动接受默认设置,快速创建package.json

    bash 复制代码
    npm init -y

(7)npm run

package.json文件中,您可以定义自定义脚本。使用npm run命令,可以运行这些脚本。

  • 运行脚本:指定脚本名称,运行相应的命令。

    bash 复制代码
    npm run <script-name>
  • 运行默认脚本 :如果脚本名称为start,通常可以通过以下命令运行:

    bash 复制代码
    npm start

这些基础命令构成了npm日常操作的核心。通过熟练掌握这些命令,您可以轻松管理项目的依赖关系,自动化日常任务,并保持项目的更新。在下一节中,我们将进一步探讨如何使用npm来管理依赖包。

2、管理依赖包

在软件开发过程中,依赖包管理是至关重要的一环。npm(Node Package Manager)作为Node.js的包管理工具,提供了丰富且强大的命令来帮助开发者高效地管理项目依赖。下面我们将详细探讨如何使用npm来管理依赖包。

(1)安装依赖包

安装依赖包是npm最基本的功能之一。以下是一些常用的安装命令:

  • 本地安装 :使用npm install <package-name>命令,可以在当前项目的node_modules目录中安装指定的包,并更新package.json文件。

    bash 复制代码
    npm install express

    如果要安装所有在package.json中列出的依赖,只需运行:

    bash 复制代码
    npm install
  • 全局安装 :使用npm install -g <package-name>命令,可以在全局范围内安装包,使其在命令行任何地方都可以使用。

    bash 复制代码
    npm install -g webpack
  • 保存到package.json :使用--save参数,可以将包添加到package.jsondependencies中,表示它是项目运行时必需的。

    bash 复制代码
    npm install express --save
  • 保存为开发依赖 :使用--save-dev参数,可以将包添加到package.jsondevDependencies中,表示它仅在开发环境中使用。

    bash 复制代码
    npm install eslint --save-dev

(2)更新依赖包

随着时间的推移,依赖包会发布新的版本,更新这些包可以帮助您获得最新的功能和修复bug。

  • 更新所有依赖 :在项目目录中运行npm update命令,将尝试更新所有依赖到最新的兼容版本。

    bash 复制代码
    npm update
  • 更新特定依赖:如果您只想更新某个特定的包,可以指定包名。

    bash 复制代码
    npm update express

(3)卸载依赖包

有时候,您可能需要从项目中移除不再需要的包。以下是如何使用npm卸载依赖包:

  • 卸载本地包 :使用npm uninstall <package-name>命令,将从node_modules目录中移除指定的包,并更新package.json

    bash 复制代码
    npm uninstall express
  • 卸载全局包 :如果包是全局安装的,使用-g参数来卸载。

    bash 复制代码
    npm uninstall -g webpack
  • 不更新package.json :如果您不想在package.json中删除包的记录,可以使用--no-save参数。

    bash 复制代码
    npm uninstall express --no-save

(4) 查看依赖包

了解项目中的依赖包及其版本是非常重要的,以下是如何查看依赖包信息:

  • 查看所有依赖 :使用npm listnpm ls命令,可以查看当前项目安装的所有包及其依赖关系。

    bash 复制代码
    npm list
  • 查看过时依赖 :使用npm outdated命令,可以列出所有有更新版本的包及其当前版本和最新版本。

    bash 复制代码
    npm outdated

(5)依赖包的版本控制

npm允许您指定依赖包的版本,以确保项目的兼容性和稳定性。

  • 精确版本 :使用=操作符来指定精确版本。

    json 复制代码
    \dependencies\ {
      \express\ \4.17.1\ }
  • 版本范围 :使用~^操作符来指定版本范围。

    json 复制代码
    \dependencies\ {
      \express\ \4.17.1\ // 允许小版本更新
    }
    json 复制代码
    \dependencies\ {
      \express\ \4.17.1\ // 允许次要版本更新
    }

通过以上命令和技巧,您可以轻松地管理项目的依赖包,确保项目运行在稳定和兼容的环境中。良好的依赖管理不仅有助于项目的维护,还能提高开发效率和协作流畅度。在下一节中,我们将探讨如何使用npm脚本来自动化日常任务。

3、脚本与钩子

在软件开发中,自动化任务可以显著提高工作效率。npm 提供了一个强大的功能,即使用 npm 脚本来运行自定义任务,以及利用钩子(hooks)在特定事件发生时执行特定的操作。下面,我们将详细探讨如何使用 npm 脚本与钩子来优化开发流程。

(1) npm 脚本

npm 脚本是在 package.json 文件中定义的,它们允许您通过简单的命令行指令来运行各种自定义任务。这些脚本利用了 Node.js 的强大功能,并且可以轻松地与 npm 的生命周期钩子结合使用。

定义脚本

package.json 文件中,您可以定义一个名为 scripts 的对象,其中包含了各种脚本。以下是一个简单的例子:

json 复制代码
{
  \scripts\ {
    \start\ 
ode server.js\ \build\ \webpack --mode production\ \test\ \jest\ }
}

在上面的例子中,我们定义了三个脚本:startbuildtest。您可以通过以下命令运行这些脚本:

bash 复制代码
npm run start
npm run build
npm run test

生命周期钩子

npm 提供了一系列生命周期钩子,这些钩子在特定的生命周期事件发生时自动执行。例如,prepublishpostinstallpretest 等。以下是如何在 package.json 中定义和使用这些钩子的例子:

json 复制代码
{
  \scripts\ {
    \pretest\ \echo \\\Running tests...\\\ \test\ \jest\ \posttest\ \echo \\\Tests completed!\\\\ }
}

在这个例子中,每次运行 npm test 之前,pretest 脚本都会执行,而 posttest 脚本则会在测试运行完成后执行。

运行顺序

当您定义了多个与同一生命周期事件相关的脚本时,它们的执行顺序是按照定义的顺序来执行的。例如:

json 复制代码
{
  \scripts\ {
    \preinstall\ \echo \\\Before install...\\\ \install\ \echo \\\Installing packages...\\\ \postinstall\ \echo \\\After install!\\\\ }
}

在这个例子中,preinstall 脚本会在 install 脚本之前执行,而 postinstall 脚本会在 install 脚本之后执行。

(2)npm 钩子

npm 钩子是一种特殊的脚本,它们在特定的 npm 事件发生时自动触发。这些事件可以是包的安装、更新或卸载等。以下是一些常见的 npm 钩子及其用途:

prepublish

在包发布之前执行,通常用于清理或准备发布。

json 复制代码
{
  \scripts\ {
    \prepublish\ \npm run build\ }
}

postpublish

在包发布之后执行,可以用于通知团队成员或更新远程资源。

json 复制代码
{
  \scripts\ {
    \postpublish\ \git push origin master\ }
}

preinstall

在安装任何包之前执行,可以用于安装依赖或执行环境检查。

json 复制代码
{
  \scripts\ {
    \preinstall\ \npm run check-environment\ }
}

postinstall

在安装所有包之后执行,通常用于运行构建或启动开发服务器。

json 复制代码
{
  \scripts\ {
    \postinstall\ \npm run build\ }
}

pretest

在运行测试之前执行,可以用于设置测试环境。

json 复制代码
{
  \scripts\ {
    \pretest\ 
pm run build\ }
}

posttest

在测试完成后执行,可以用于清理测试环境。

json 复制代码
{
  \scripts\ {
    \posttest\ \echo \\\Tests passed!\\\\ }
}

通过利用 npm 脚本和钩子,您可以自动化许多日常任务,从而节省时间并减少人为错误。这些功能是 Node.js 开发者工作流程的重要组成部分,能够帮助您构建更加高效和可维护的代码库。在下一节中,我们将探讨 npm 的高级应用,包括 npm 脚本的最佳实践和进阶技巧。

四、npm包管理

1、创建npm包

在软件开发的过程中,我们经常需要将代码模块化,以便在不同的项目之间复用。npm 作为世界上最大的软件注册和管理体系,提供了创建、发布和维护包的强大功能。下面,我们将详细介绍如何创建一个 npm 包。

确定包的结构

在创建 npm 包之前,首先需要确定包的结构。一个标准的 npm 包通常包含以下几个部分:

  • package.json:包的元数据文件,包含了包的名称、版本、描述、入口点、依赖等关键信息。
  • README.md:包的说明文件,用于介绍包的功能、用法和安装指南。
  • LICENSE:包的许可证文件,明确了包的使用和分发条款。
  • index.jsindex.ts:包的主要入口文件,其他文件和模块将从这个文件导出。

初始化包

创建一个新的 npm 包的第一步是创建一个 package.json 文件。您可以使用 npm init 命令来初始化一个新的包,这个命令会引导您填写一些基本信息,如包名、版本、描述等。

bash 复制代码
npm init

或者,您可以使用 npm init -y 来跳过交互式过程,并使用默认值创建 package.json 文件。

编写代码

在创建了 package.json 文件之后,您可以开始编写包的代码。根据您的包的功能,您可能需要创建多个模块和文件。例如,如果您正在创建一个用于处理日期的包,您可能需要一个 dateUtils.js 文件,它包含了一系列处理日期的函数。

javascript 复制代码
// dateUtils.js
function formatDate(date) {
  // 实现日期格式化
}

function addDays(date, days) {
  // 实现添加天数
}

module.exports = {
  formatDate,
  addDays
};

编写文档

一个优秀的 npm 包应该有清晰、详细的文档,以便用户了解如何使用它。README.md 文件是用户了解包的主要途径,因此它应该包含以下内容:

  • 包的名称和描述
  • 安装指南
  • 使用示例
  • API 文档
  • 贡献指南
  • 许可证信息

添加依赖

如果您的包依赖于其他包,您需要将这些依赖添加到 package.json 文件中。使用 npm install <package_name> 命令安装依赖,并确保它们被正确地添加到 package.jsondependencies 字段中。

bash 复制代码
npm install lodash --save

编写测试

为了确保包的稳定性和可靠性,编写测试是非常重要的。您可以使用像 Jest、Mocha 或 Jasmine 这样的测试框架来编写和运行测试。

bash 复制代码
npm install --save-dev jest

package.json 中添加一个测试脚本:

json 复制代码
{
  \scripts\ {
    \test\ \jest\ }
}

然后,您可以运行以下命令来执行测试:

bash 复制代码
npm test

版本管理

在开发过程中,您需要管理包的版本。每次发布新功能或修复问题时,都应该更新版本号。npm 提供了命令来自动化版本管理过程:

bash 复制代码
npm version <update_type>

其中 <update_type> 可以是 patch(小更新)、minor(次要更新)或 major(主要更新)。

发布包

在您完成了包的开发和测试之后,就可以发布它到 npm 上了。首先,确保您已经登录到 npm:

bash 复制代码
npm login

然后,运行以下命令来发布您的包:

bash 复制代码
npm publish

在发布之前,请检查以下事项:

  • 包名是否唯一
  • package.json 文件是否包含所有必要的信息
  • 您是否有权限发布到 npm

发布后,其他开发者就可以通过 npm install <package_name> 来安装您的包了。

创建 npm 包是一个涉及多个步骤的过程,但通过遵循上述指南,您可以确保您的包结构良好、文档齐全、经过充分测试,并且易于使用。记住,良好的包设计可以极大地提高代码的可维护性和可复用性。

2、发布npm包

在软件开发领域,npm(Node Package Manager)已经成为事实上的标准,用于管理和分发JavaScript代码包。你创建了一个npm包,下一步就是将它发布到npm仓库,以便他人可以通过npm安装你的包。以下是发布npm包的详细步骤。

(1)确保npm包的完整性

在发布之前,确保你的npm包符合以下基本要求:

  • 包含有效的package.json文件,其中应包括:

    • name:的名称,必须是唯一的。
    • version:包的版本号,遵循语义化版本控制(SemVer)。
    • description:包的简短描述。
    • main:包的主要入口文件。
    • scripts:可选的脚本,如启动开发服务器或运行测试。
    • keywords:与包相关的关键词,有助于用户发现你的包。
    • author:包的作者。
    • license:包的许可证。
    • bugs:一个可以提交问题的URL或邮箱地址。
    • homepage:包的官方网站URL。
  • 包含一个README.md文件,详细介绍包的功能、安装方法、使用示例和贡献指南。

  • 包含一个LICENSE文件,说明包的使用和分发条款。

  • 包含必要的测试文件,确保包的功能按预期工作。

(2)注册npm账户

在发布包之前,你需要有一个npm账户。如果你还没有账户,可以通过访问npm官网并注册一个新账户来创建一个。

(3)登录npm

在你的终端或命令提示符中,使用以下命令登录到npm:

bash 复制代码
npm login

按照提示输入你的用户名、密码和电子邮件地址。

(4)本地验证

在发布之前,确保你的本地npm配置正确。运行以下命令配置:

bash 复制代码
npm config list

检查registry字段是否指向https://registry.npmjs.org/,npm官方仓库的地址。

(5)发布包

在终端中,导航到包含你的package.json文件的目录,并运行以下命令来发布你的包:

bash 复制代码
npm publish

npm将读取package.json中的信息,并上传你的包到npm仓库。在发布过程中,你可能需要确认版本号和包的名称。

(6)发布过程中的注意事项

  • 确保你的包名称是唯一的。如果名称已被占用,npm会拒绝发布。
  • 版本号必须符合语义化版本控制(SemVer)。每次发布时,版本号应递增。
  • 如果你的包是一个私人包,你需要使用npm publish --access public来明确指定它应该是公开的。

(7)更新已发布的包

如果需要更新已发布的包,只需增加版本号并重新运行npm publish命令。确保遵循版本控制的最佳实践,以便用户可以了解你的包的更改。

(8)维护和更新

发布npm包后,维护和更新是非常重要的。以下是一些最佳实践:

  • 定期检查和修复安全问题。
  • 监听社区反馈,并根据用户需求更新包。
  • 保持与依赖库的兼容性,及时更新依赖。
  • 提供清晰的变更日志,让用户了解每个版本的变化。

发布npm包是一个激动人心的过程,它允许你与世界分享你的代码。遵循上述步骤,你将能够确保你的包被正确地发布,并且易于他人使用和贡献。记住,良好的文档和持续的维护是确保你的npm包成功的关键因素。

3、维护npm包

发布npm包只是开始,为了确保包的质量、安全性和可持续性,维护工作至关重要。以下是关于如何有效维护npm包的详细指南。

(1)维护的重要性

维护npm包不仅仅是为了修复bug或添加新功能,它还涉及到保持包的更新、响应社区反馈、以及确保包的安全性。良好的维护可以提升用户满意度,增加包的采用率,并建立你在开发者社区中的声誉。

(2)监听和响应反馈

用户反馈是改进npm包的重要来源。以下是一些处理用户反馈的方法:

  • 设置问题跟踪器:使用GitHub或其他问题跟踪系统来收集和跟踪问题。
  • 定期检查问题:定期查看问题列表,优先处理关键问题和安全漏洞。
  • 及时回应:对用户提出的问题和pull request给予及时的回应,即使不能立即解决,也应告知用户你已收到反馈并计划处理。
  • 更新变更日志 :每次更新包时,都要在CHANGELOG.md文件中记录所做的更改,包括新功能、bug修复和依赖更新。

(3)持续集成和自动化测试

自动化测试和持续集成(CI)是确保代码质量的关键。以下是一些建议:

  • 编写测试用例:为你的包编写全面的测试用例,确保所有功能按预期工作。
  • 设置CI流程:使用Travis CI、CircleCI、Jenkins等工具自动运行测试,并在每次提交时检查代码质量。
  • 代码审查:在合并代码之前,进行代码审查以确保代码质量和一致性。

(4)保持依赖项更新

随着时间的推移,你的包依赖的库可能会发布更新,这些更新可能包含新功能、性能改进或安全修复。以下是一些建议:

  • 定期更新依赖项 :使用npm outdated命令检查过时的依赖项,并使用npm update更新它们。
  • 测试兼容性:在更新依赖项后,确保运行所有测试以验证兼容性。
  • 语义化版本控制:遵循语义化版本控制(SemVer),在更新依赖项时适当地提升版本号。

(5)处理安全漏洞

安全是维护npm包时的一个重要方面。以下是一些建议:

  • 使用安全工具 :使用如npm audit这样的工具来检测已知的安全漏洞。
  • 及时修复漏洞:一旦发现安全漏洞,应立即修复,并发布一个包含修复的安全版本。
  • 通知用户:如果安全漏洞影响到了用户,确保通过包的更新日志、GitHub问题跟踪器或邮件列表等方式通知他们。

(6)文档和示例

清晰的文档和示例代码对于用户来说至关重要。以下是一些建议:

  • 维护文档 :确保README.md和其他文档是最新的,并且易于理解。
  • 提供示例:提供示例代码和用法指南,帮助用户快速上手。
  • 更新文档:每次发布新版本时,更新文档以反映任何重大更改或新功能。

(7)版本管理和发布

版本管理是维护npm包的关键部分。以下是一些建议:

  • 遵循版本控制规则:使用语义化版本控制(SemVer)来管理版本号,确保用户了解每个版本的更改。
  • 发布预发布版本:在发布主版本之前,可以先发布预发布版本,让用户和贡献者进行测试。
  • 保持发布日志 :在CHANGELOG.md中记录每个版本的详细更改,包括新功能、改进和bug修复。

(8)社区参与和贡献

一个活跃的社区可以极大地帮助维护npm包。以下是一些建议:

  • 鼓励贡献 :在CONTRIBUTING.md中提供明确的指导,鼓励用户贡献代码和反馈。
  • 管理贡献者:如果可能,邀请活跃的贡献者加入你的项目,共同维护包。
  • 组织活动:定期组织黑客松或在线讨论,以促进社区参与和协作。

通过遵循上述维护策略,你可以确保你的npm包保持健康、安全,并且能够满足用户的需求。记住,良好的维护不仅能够提升包的质量,还能增强你在开发者社区中的声誉。

五、npm高级应用

1、npm脚本

在软件开发过程中,自动化任务可以大幅提高效率和生产力。npm脚本提供了一种简单而强大的方式来运行自定义脚本,无需安装额外的工具。在本节中,我们将深入探讨如何使用npm脚本自动化常见的开发任务。

(1)npm脚本的基本概念

npm脚本实际上是基于Node.js运行的自定义脚本,它们被定义在package.json文件中的scripts字段里。这些脚本可以执行任何Node.js可以执行的操作,包括运行测试、启动开发服务器、构建项目等。

(2)如何定义npm脚本

package.json文件中,你可以这样定义一个npm脚本:

json 复制代码
{
  \scripts\ {
    \start\ \node server.js\ \test\ \jest\ }
}

在上面的例子中,start脚本用于启动一个Node.js服务器,而test脚本用于运行测试。

(3)运行npm脚本

要运行一个npm脚本,你可以在命令行中使用以下命令:

bash 复制代码
npm run <script-name>

例如,要运行上面的start脚本,你可以输入:

bash 复制代码
npm run start

(4)npm脚本的进阶用法

以下是一些使用npm脚本的进阶技巧和用法:

1. 使用环境变量

你可以在npm脚本中使用环境变量来传递额外的参数或配置。例如:

json 复制代码
{
  \scripts\ {
    \start\ \node server.js --port 3000\ }
}

或者,你可以使用环境变量:

json 复制代码
{
  \scripts\ {
    \\ \node server.js\ \prestart\ \export PORT=3000\ }
}

在这个例子中,prestart脚本会在start脚本之前运行,设置PORT环境变量。

2. 脚本钩子

npm允许你定义生命周期钩子,这些钩子在特定的生命周期事件发生时自动执行。例如,prestartpoststartstart脚本的前置和后置钩子:

json 复制代码
{
  \scripts\ {
    \prestart\ \echo 'Starting the server...'\ \start\ \node server.js\ \poststart\ \echo 'Server started successfully!'\ }
}

当你运行npm start时,prestart脚本会先执行,然后是start脚本,最后是poststart脚本。

3. 并行和串行执行

如果你有多个脚本需要执行,你可以并行或串行地运行它们。使用&符号可以并行执行脚本,而使用&&可以串行执行:

bash 复制代码
npm run script1 & npm run script2

或者:

bash 复制代码
npm run script1 && npm run script2
4. 跨平台兼容性

由于不同的操作系统可能有不同的命令和工具,npm脚本可能需要跨平台兼容性。可以使用npx来运行跨平台的命令,例如:

json 复制代码
{
  \scripts\ {
    \cleanup\ \npx rimraf dist\ }
}

这里,rimraf是一个可以删除文件的Node.js模块,npx确保在本地没有安装rimraf的情况下也能运行它。

(5)利用npm生命周期

npm的生命周期钩子不仅限于prepost,还包括initinstallprepublishpublish等。这些钩子可以在特定的生命周期事件发生时执行自定义脚本,例如:

json 复制代码
{
  \scripts\ {
    \prepublish\ \echo 'Running prepublish tasks...'\ \postpublish\ \echo 'Running postpublish tasks...'\ }
}

当包被发布到npm仓库之前,prepublish脚本会执行,而发布之后,postpublish脚本会执行。

(6)结论

npm脚本为开发者提供了一种简单而强大的方式来自动化常见的开发任务。通过合理地使用环境变量、钩子和生命周期事件,你可以构建一个高度自动化的开发流程,从而提高工作效率和项目质量。掌握npm脚本的使用,可以让你的开发工作更加流畅和高效。

2、npm工作空间

在大型项目和复杂的依赖管理中,npm工作空间(workspaces)提供了一种高效的方式来管理多个包。工作空间允许你在一个项目中同时操作多个包,共享依赖项,并运行跨包的命令。在本节中,我们将详细介绍npm工作空间的概念、配置方法以及如何在实际项目中使用它。

(1)工作空间的概述

npm工作空间是一个能够包含多个包的目录,这些包通常位于不同的子目录中。工作空间中的每个包都可以有自己的package.json文件,但它们可以共享一个统一的package-lock.jsonnpm-shrinkwrap.json文件,从而减少依赖项的重复下载。

(2)配置npm工作空间

要设置npm工作空间,你需要在项目根目录下的package.json文件中添加一个workspaces字段。以下是一个工作空间配置的例子:

json 复制代码
{
  
ame\ \my-monorepo\ \workspaces\ [
    \packages/*\ ]
}

在这个配置中,\packages/*\表示工作空间将包括packages`目录下的所有子目录,每个子目录被视为一个独立的包。

(3)工作空间的依赖管理

当你在工作空间中安装依赖项时,npm会将依赖项安装到根目录的node_modules中,而不是每个包的本地node_modules目录。这意味着所有包都可以共享这些依赖项,减少了磁盘空间的使用和安装时间。

(4)使用npm工作空间

以下是如何在实际项目中使用npm工作空间的几个步骤:

1. 初始化工作空间

首先,你需要创建一个包含多个子包的目录结构。然后,在根目录下创建一个package.json文件,并配置workspaces字段。

2. 安装依赖项

在工作空间的根目录下运行以下命令来安装所有包的依赖项:

bash 复制代码
npm install

这将会读取所有子包的package.json文件,并将它们的依赖项安装到根目录的node_modules中。

3. 运行脚本

你可以使用npm run命令来运行工作空间中的脚本。如果你想要运行所有包的某个脚本,可以使用以下命令:

bash 复制代码
npm run script-name --workspaces

例如,如果你想要构建所有包,可以这样操作:

bash 复制代码
npm run build --workspaces
4. 管理包版本

在工作空间中,你可以使用npm命令来管理包的版本。当你更新一个包的版本时,npm会自动更新所有相关包的package.json文件中的依赖项,以保持一致性。

5. 发布包

当你准备好发布工作空间中的一个或多个包时,你可以使用npm publish命令。npm会自动识别工作空间配置,并允许你发布单个包或所有包。

(5)工作空间的优点

使用npm工作空间具有以下优点:

  • 依赖项共享:减少重复的依赖项下载,节省磁盘空间和安装时间。
  • 一致性:确保所有包使用相同版本的依赖项,减少版本冲突。
  • 简化操作:可以轻松地运行跨包的命令和脚本。
  • 可维护性:更容易管理大型项目中的多个包。

(6)工作空间的挑战

尽管npm工作空间带来了许多便利,但它也有一些挑战:

  • 复杂性:对于新手来说,理解工作空间的配置和管理可能比较困难。
  • 性能:在工作空间中运行命令可能比在单个包中运行更慢,因为npm需要处理更多的文件和依赖项。
  • 兼容性:某些第三方工具可能不完全支持工作空间,这可能导致集成问题。

(7)结论

npm工作空间是管理和维护大型项目的一个强大工具。通过合理地配置和使用工作空间,开发者可以更高效地处理多个包的依赖关系和执行。尽管它可能带来一些挑战,但工作空间的优点通常超过了这些挑战,特别是在需要紧密协作和共享依赖项的复杂项目中。

3、npm钩子与事件

在软件开发中,钩子(Hooks)和事件(Events)是常见的概念,它们允许我们在特定的时机执行自定义的逻辑。在npm中,这些概念同样重要,因为它们可以帮助我们自动化常见的任务,并在包的生命周期中的关键点触发自定义行为。在本节中,我们将深入探讨npm的钩子与事件,了解它们是如何工作的以及如何在实际项目中使用它们。

(1)npm钩子的概念

npm钩子是基于npm生命周期的特定阶段执行脚本的功能。每个npm命令都有一个生命周期,例如installbuildprepublish等。在这些命令执行的不同阶段,npm提供了一系列的钩子,你可以在这些钩子上绑定自定义脚本。

(2)生命周期钩子

npm的生命周期钩子主要分为两大类:预处理钩子和后处理钩子。预处理钩子在命令执行之前触发,后处理钩子在命令执行之后触发。以下是一些常见的生命周期钩子:

  • pre: 在安装依赖之前执行。
  • install: 在安装依赖之后执行。
  • postinstall: 在安装依赖之后执行。
  • prepublish: 在发布包之前执行。
  • publish: 在发布之后执行。
  • postpublish: 在发布包之后执行。
  • pretest: 在运行测试之前执行。
  • test: 在运行测试之后执行。
  • posttest: 在运行测试之后执行。

(3)如何使用钩子

要在npm中使用钩子,你需要在package.json文件中定义脚本。以下是一个包含自定义钩子的package.json示例:

json 复制代码
{
  \scripts\ {
    \preinstall\ \echo 'Running preinstall hook'\ \postinstall\ \echo 'Running postinstall hook'\ \prepublish\ \echo 'Running prepublish hook'\ \test\ \echo 'Running test hook'\ }
}

在这个例子中,每当执行npm installnpm publishnpm test命令时,相应的钩子会被触发,并执行定义的脚本。

(4)事件监听

除了生命周期钩子,npm还允许你监听特定的事件。这些事件通常与npm的时行为有关,例如包的安装或卸载。你可以使用npm log命令来查看事件日志。

以下是如何使用npm命令来监听事件的示例:

bash 复制代码
npm log -- events

这将列出所有可监听的事件,包括:

  • log: 记录日志信息。
  • error: 记录错误信息。
  • 警告: 记录警告信息。
  • progress: 显示进度信息。

(5)自定义事件

除了内置的事件,你还可以创建自定义事件并在你的脚本中使用它们。这可以通过Node.js的events模块来实现,它允许你创建和管理自定义事件。

以下是如何在npm脚本中创建和使用自定义事件的示例:

javascript 复制代码
const EventEmitter = require('events');
const myEmitter = new EventEmitter();

// 创建一个自定义事件
myEmitter.on('myEvent', () => {
  console.log('Custom event triggered');
});

// 触发自定义事件
myEmitter.emit('myEvent');

(6)钩子与事件的用途

使用npm钩子和事件可以实现以下目的:

  • 自动化测试 : 在pretestposttest钩子上运行测试脚本。
  • 自动化部署 : 在postpublish钩子上执行部署脚本。
  • 清理 : 在postinstall钩子上执行清理任务。
  • 通知: 在关键事件发生时发送通知。

(7)注意事项

使用npm钩子和事件时,需要注意以下几点:

  • 执行顺序: 钩子的执行顺序很重要,确保它们按照预期的顺序执行。
  • 性能: 避免在钩子中执行耗时的操作,这可能会影响npm命令的执行速度。
  • 错误处理: 在钩子脚本中添加错误处理逻辑,以确保在出现问题时能够优雅地处理。

(8)结论

npm钩子和事件是强大的工具,它们可以帮助你自动化和优化软件开发工作流程。合理地使用这些功能,你可以确保在包的生命周期中的关键点执行必要的任务,从而提高生产效率和代码质量。在本节中,我们介绍了npm钩子和事件的概念、如何使用它们以及它们的实际应用。掌握这些知识,你将能够更好地利用npm来管理你的JavaScript项目和包。

相关推荐
逐·風8 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫37 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL5 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1115 小时前
css实现div被图片撑开
前端·css