当前位置: 首页 > news >正文

Node.js入门与生态全解析:包管理与构建工具详解

Node.js入门与生态全解析:包管理与构建工具详解

目录

  1. 🎯 包管理
    • 使用 npm 和 yarn:项目依赖管理的利器
    • 创建和发布 npm 包:实现模块化与共享
  2. ⚙️ 构建工具
    • 使用 Webpack 和 Babel:高效打包与代码转换
    • 配置构建流程:优化与自动化的最佳实践

🎯 包管理

- 使用 npm 和 yarn:项目依赖管理的利器

在Node.js的开发过程中,包管理是核心环节之一,它提供了管理第三方库、共享代码及简化依赖项管理的功能。Node.js社区最常用的包管理工具有两种:npm(Node Package Manager)和 yarn。这两个工具各自有其独特的功能,但目标一致,都是为了高效管理项目的依赖项。

npm 基本用法

npm 是 Node.js 的官方包管理工具。其核心功能包括安装删除更新管理依赖项。在项目目录中,只需执行如下命令,就可以安装项目所需的第三方库:

npm install <package-name>

安装完成后,依赖项会被记录在 package.json 文件的 dependencies 字段中。如果要一次安装多个依赖,只需在命令中列出多个包名。

npm install express mongoose lodash

安装时默认使用最新版本的包,但可以通过指定版本号来安装某个具体版本:

npm install express@4.17.1

此外,npm 还支持全局安装,这样工具类的包可以在任何项目中使用。例如,安装 nodemon 以全局监视代码变动:

npm install -g nodemon
yarn 基本用法

yarn 是 Facebook 推出的包管理工具,设计初衷是为了提供更快、更安全的依赖管理。与 npm 相比,yarn 在处理并发下载和缓存方面有明显优势。使用 yarn 安装依赖项的方式如下:

yarn add <package-name>

同样地,yarn 支持一次安装多个包,并记录在 package.json 中:

yarn add react react-dom

如果要全局安装某个包,可以使用以下命令:

yarn global add nodemon

npm 不同,yarn 默认会生成一个 yarn.lock 文件,确保所有依赖的版本在每次安装时保持一致性,从而减少了团队协作中的版本冲突问题。


- 创建和发布 npm 包:实现模块化与共享

在现代JavaScript开发中,模块化和代码共享已成为不可或缺的部分。通过 npm,开发者可以轻松创建并发布自己的包,与社区共享代码。以下是创建和发布 npm 包的详细步骤。

创建 npm 包

首先,在项目目录中执行 npm init 命令,该命令会引导开发者填写包的相关信息,包括名称、版本号、描述、入口文件等。执行完成后,npm 会生成一个 package.json 文件,记录这些元数据:

npm init

示例 package.json 文件:

{"name": "my-awesome-package","version": "1.0.0","description": "A sample npm package","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "John Doe","license": "ISC"
}

index.js 是包的入口文件,用户安装并引入该包时,程序会从此文件开始执行。

发布 npm 包

当包创建完成后,需要将其发布到 npm 仓库。首先,开发者需要确保拥有一个 npm 账号,并在终端中使用以下命令进行登录:

npm login

登录成功后,可以使用 npm publish 命令将包发布到 npm 仓库:

npm publish

发布成功后,其他开发者就可以通过 npm install 安装并使用该包。

需要注意的是,包的名称必须是唯一的,不能与现有的 npm 包名称冲突。如果包需要发布新版本,只需更新 package.json 中的版本号,并再次执行 npm publish 即可。


⚙️ 构建工具

- 使用 Webpack 和 Babel:高效打包与代码转换

在现代前端开发中,使用构建工具可以显著提高代码的管理和打包效率。其中,WebpackBabel 是最常用的两个工具。Webpack 主要用于打包和优化前端资源,而 Babel 则用于将现代 JavaScript 代码转换为兼容性更强的旧版 JavaScript。

Webpack 基本用法

Webpack 是一个模块打包工具,可以将多个 JavaScript、CSS 和其他资源文件打包为一个或多个静态文件,以提高页面加载性能。Webpack 的配置文件通常为 webpack.config.js,其核心配置项包括 entry(入口文件)、output(输出文件)和 module(模块规则)。

以下是一个简单的 webpack.config.js 示例:

const path = require('path');module.exports = {entry: './src/index.js',  // 入口文件output: {filename: 'bundle.js',  // 打包后的文件名path: path.resolve(__dirname, 'dist')  // 输出目录},module: {rules: [{test: /\.js$/,  // 对所有 .js 文件使用 Babel 进行转换exclude: /node_modules/,  // 排除 node_modules 文件夹use: {loader: 'babel-loader'}}]}
};
Babel 基本用法

Babel 是一个 JavaScript 编译器,用于将使用现代 ECMAScript 特性的代码转换为向后兼容的代码。它与 Webpack 配合使用时,通常通过 babel-loader 来处理 .js 文件。

首先,需要安装相关依赖:

npm install --save-dev @babel/core @babel/preset-env babel-loader

然后,在项目根目录下创建 .babelrc 文件,并进行如下配置:

{"presets": ["@babel/preset-env"]
}

此配置告诉 Babel 将代码转换为与大多数浏览器兼容的 JavaScript 版本。


- 配置构建流程:优化与自动化的最佳实践

为了提升开发效率,构建工具的流程配置尤为重要。在实际项目中,开发者往往需要结合使用多个插件来优化构建流程。例如,使用 MiniCssExtractPluginTerserPlugin 分别进行 CSS 提取和 JavaScript 压缩,从而减少文件体积,提升加载速度。

以下是一个典型的 Webpack 构建流程配置示例:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,  // 处理 CSS 文件use: [MiniCssExtractPlugin.loader, 'css-loader']}]},plugins: [new MiniCssExtractPlugin({filename: '[name].css',  // 提取后的 CSS 文件名})],optimization: {minimize: true,  // 开启代码压缩minimizer: [new TerserPlugin()],  // 使用 Terser 进行 JavaScript 压缩}
};

通过这种配置,开发者可以将 JavaScript 和 CSS 进行独立打包与优化,确保生产环境下的文件体积最小化,提高页面加载速度。

相关文章:

Node.js入门与生态全解析:包管理与构建工具详解

Node.js入门与生态全解析&#xff1a;包管理与构建工具详解 目录 &#x1f3af; 包管理 使用 npm 和 yarn&#xff1a;项目依赖管理的利器创建和发布 npm 包&#xff1a;实现模块化与共享 ⚙️ 构建工具 使用 Webpack 和 Babel&#xff1a;高效打包与代码转换配置构建流程&am…...

828华为云征文|华为云Flexus X实例docker部署harbor镜像仓库

828华为云征文&#xff5c;华为云Flexus X实例docker部署harbor镜像仓库 华为云最近正在举办828 B2B企业节&#xff0c;Flexus X实例的促销力度非常大&#xff0c;特别适合那些对算力性能有高要求的小伙伴。如果你有自建MySQL、Redis、Nginx等服务的需求&#xff0c;一定不要错…...

fedora siliverblue adb

开始 1、找到手机 usb 的 idV&#xff1a; $ lsusb ... Bus 001 Device 012: ID 22d9:2766 OPPO Electronics Corp. PECM30是 22d9 2、在 toolbox 外面添加 udev&#xff1a; sudo nano /etc/udev/rules.d/51-android.rulesSUBSYSTEM"usb", ATTR{idVendor}"…...

mybatisplus查询指定字段

使用mybatisplus查询指定字段 实体类 package com.test.entity;import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annota…...

探寻 IP 代理地址繁多之因

在当今的网络天地里&#xff0c;IP 代理服务随处可见&#xff0c;且令人称奇的是&#xff0c;它们常常手握海量的 IP 地址可供挑选。那么&#xff0c;究竟是什么原因使得 IP 代理拥有如此众多的地址呢&#xff1f;现在&#xff0c;就让我们一同深入探究这个神秘现象背后的缘由。…...

MyBatis常见面试题

文章目录 说说 MyBatis 执行流程&#xff1f;1. 加载配置文件和映射文件2. 构建 SqlSessionFactory3. 创建 SqlSession4. 调用 Mapper 方法5. 处理参数和结果映射6. 事务管理7. 释放资源简化流程图&#xff1a; MyBatis 和 Hibernate 有什么不同&#xff1f;1. **对象关系映射层…...

Swift 运算符

Swift 运算符 Swift 是一种强类型编程语言,由苹果公司开发,用于iOS、macOS、watchOS和tvOS应用程序的开发。Swift 运算符是其核心特性之一,它允许开发者执行各种数学和逻辑操作。本文将详细介绍 Swift 中的运算符,包括它们的功能、用法和类型。 Swift 运算符概述 Swift …...

PDF转PPT神器揭秘!3步操作,轻松打造2024年会议爆款PPT

现在是数字化的时代&#xff0c;PDF 和 PPT 对职场的人来说可重要了。PDF 文件格式稳&#xff0c;也好分享&#xff0c;所以大家都爱用。PPT 演示起来很厉害&#xff0c;在开会、讲座的时候特别管用。不过呢&#xff0c;要是有好多 PDF 文件&#xff0c;咋能快点把它们变成好看…...

✨机器学习笔记(一)—— 监督学习和无监督学习

1️⃣ 监督学习&#xff08;supervised learning&#xff09; ✨ 两种主要类型的监督学习问题&#xff1a; 回归&#xff08;regression&#xff09;&#xff1a;predict a number in infinitely many possible outputs. 分类&#xff08;classification&#xff09;&#xff1…...

【Netty】实战:基于Http的Web服务器

目录 一、实现ChannelHandler 二、实现ChannelInitializer 三、实现服务器启动程序 四、测试 本文来实现一个简单的Web服务器&#xff0c;当用户在浏览器访问Web服务器时&#xff0c;可以返回响应的内容给用户。很简单&#xff0c;就三步。 一、实现ChannelHandler pack…...

4K4D: Real-Time 4D View Synthesis at 4K Resolution 学习笔记

本文是学习4K4D的笔记记录 Project Page&#xff1a;https://zju3dv.github.io/4k4d/ 文章目录 1 Pipeline1.1 特征向量的计算1.2 几何建模1.3 外观建模⭐1&#xff09; 球谐函数SH模型2&#xff09; 图像融合技术 1.4 可微分深度剥离渲染 2 Train&#xff08;loss&#xff09;…...

2024年 Biomedical Signal Processing and Control 期刊投稿经验最新分享

期刊介绍 《Biomedical Signal Processing and Control 》期刊旨在为临床医学和生物科学中信号和图像的测量和分析研究提供一个跨学科的国际论坛。重点放在处理在临床诊断&#xff0c;患者监测和管理中使用的方法和设备的实际&#xff0c;应用为主导的研究的贡献。 生物医学信…...

【C++】关于类的public、protected 、private

public、protected、private是访问控制修饰符&#xff0c;决定了类成员的可访问性&#xff0c;特性如下&#xff1a; public&#xff1a; 可以被类内部和类外部直接访问 可以被派生类访问 protected&#xff1a; 可以被类内部访问 可以被派生类访问 不能被类的外部直接访问 p…...

使用 POST 方法与 JSON 格式进行 HTTP 请求的最佳实践

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…...

学习笔记--Java基础核心知识

方法重载 请记住下面重载的条件 方法名称必须相同。参数列表必须不同&#xff08;个数不同、或类型不同、参数类型排列顺序不同等&#xff09;。方法的返回类型可以相同也可以不相同。仅仅返回类型不同不足以成为方法的重载。重载是发生在编译时的&#xff0c;因为编译器可以根…...

SAP学习笔记 - 开发01 - BAPI是什么?通过界面和ABAP代码来调用BAPI

BAPI作为SAP中的重要概念&#xff0c;在SAP系统的开发中几乎是必须的。 本章来学习一下BAPI 的直观印象&#xff0c;以及在ABAP代码中的调用。 目录 1&#xff0c; BAPI概述 1&#xff0c;从画面角度来直观体验一下BAPI 1-1&#xff0c;MM&#xff1a;購買依頼変更BAPI - …...

mysql笔记3(数据库、表和数据的基础操作)

文章目录 一、数据库的基础操作1. 显示所有的仓库(数据库)2. 创建数据库注意(命名规范)&#xff1a; 3. 删除数据库4. 查看创建数据库的SQL5. 创建数据库时跟随字符编码6. 修改数据库的字符编码 二、表的基础操作1. 引入表的思维2. 引用数据库3. 查看该数据库下面的表4. 创建表…...

计算机毕业设计选题-基于python的企业人事管理系统【源码+文档+数据库】

&#x1f496;&#x1f525;作者主页&#xff1a;毕设木哥 精彩专栏推荐订阅&#xff1a;在 下方专栏&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; 实战项目 文章目录 实战项目 一、基于python的企业人事管理系…...

科研绘图系列:R语言折线图(linechart plots)

文章目录 介绍加载R包导入数据数据预处理画图组合图形介绍 在R语言中,折线图(Line Plot)是一种常用的数据可视化类型,用于展示数据随时间或有序类别变化的趋势。折线图通过连接数据点来形成一条或多条线,这些线条可以清晰地表示数据的变化方向、速度和模式。 加载R包 k…...

Opencv中的直方图(5)计算EMD距离的函数EMD()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算两个加权点配置之间的“最小工作量”距离。 该函数计算地球搬运工距离&#xff08;Earth Mover’s Distance&#xff09;和/或两个加权点配…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

渗透实战PortSwigger靶场:lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...

Python的__call__ 方法

在 Python 中&#xff0c;__call__ 是一个特殊的魔术方法&#xff08;magic method&#xff09;&#xff0c;它允许一个类的实例像函数一样被调用。当你在一个对象后面加上 () 并执行时&#xff08;例如 obj()&#xff09;&#xff0c;Python 会自动调用该对象的 __call__ 方法…...