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

JS运行环境、包管理、打包工具总结

🌳JS运行环境-node.js

运行环境就是代码解析和执行的程序,比如jvm等虚拟机,他们的主要工作就是根据设定的语法规则解析编译代码,然后运行代码。
js的语法规则遵循ES规范。

🍁node.js

Node.Js官网

Node.js是一种基于Chrome V8引擎的JavaScript运行时,可让您使用JavaScript语言在服务器端运行代码。它是一个开源、跨平台的平台,可以轻松地构建高效的网络应用程序和服务器端程序。
Node.js具有单线程、事件驱动、非阻塞I/O的特点,这使得它非常适合处理大量并发请求的网络应用程序。与传统的服务器端编程语言(如PHP或Java)不同,Node.js可以快速地响应来自多个客户端的请求,而无需创建大量的线程或进程。
Node.js生态系统非常强大,拥有大量的第三方模块,可以轻松地扩展功能和构建应用程序。它还提供了内置的HTTP和HTTPS模块,使得开发Web应用程序非常方便。
Node.js在最近几年已经成为非常流行的开发语言和平台,广泛用于构建Web应用程序、命令行工具、网络服务器、IoT设备和其他类型的应用程序。

注意

Node.js从版本12开始支持ES模块(ECMAScript模块)。您可以使用.mjs文件扩展名或在package.json中使用"type": "module"来启用ES模块。
要在Node.js中使用ES模块,您可以使用import和export语句,就像在浏览器中一样。请注意,ES模块与CommonJS模块在某些方面略有不同,例如导入和导出的方式以及模块解析规则。
如果您需要在旧版本的Node.js中使用ES模块,您可以考虑使用Babel等工具进行转换。

🍁Deno.js

Deno.js官网

Deno是一个现代的、安全的JavaScript和TypeScript运行时环境,由Node.js的创始人Ryan Dahl开发。Deno的目标是改进Node.js的一些限制,提供更好的开发体验和安全性。
Deno使用了V8引擎和Rust语言编写的内置库,以提供快速和高效的JavaScript执行。它也具有许多新的功能和特性,如支持ES模块、异步API的改进和集成的工具集等。
Deno的安全性也得到了大幅提升。它的默认设置禁用了文件和网络的访问权限,需要通过命令行参数或配置文件明确授予权限。它还提供了一套权限控制系统,允许用户细粒度地控制应用程序的访问权限。
与Node.js不同,Deno不需要使用包管理器,而是使用URL来引入模块。这使得它更加轻量级和易于使用。Deno还提供了一个集成的工具集,如内置的测试框架和代码格式化程序,以帮助开发人员提高开发效率。
总之,Deno是一个非常有前途的运行时环境,它在提供快速、高效和安全的JavaScript执行方面具有巨大的潜力。

以下是一个使用Deno编写的简单HTTP服务器的示例:

import { serve } from "https://deno.land/std/http/server.ts";const server = serve({ port: 8000 });
console.log("Server is running on port 8000...");for await (const req of server) {console.log(`Request received: ${req.method} ${req.url}`);req.respond({body: "Hello, Deno!",});
}

在这个例子中,我们首先导入了Deno的serve函数来创建一个HTTP服务器。然后我们启动服务器并在控制台输出消息。最后,我们使用for await循环来处理收到的HTTP请求,并简单地返回一个"Hello, Deno!"的响应。

可以通过在终端中运行以下命令来运行这个例子:

deno run --allow-net server.ts

这个命令指示Deno运行名为server.ts的文件,并授予它访问网络的权限。一旦运行,我们可以使用任何浏览器或HTTP客户端向服务器发送请求,并查看响应。

这只是一个简单的例子,Deno还提供了许多其他的功能和API,如文件系统、进程管理、WebSocket等等。使用Deno,开发人员可以轻松地构建高效、安全和可靠的应用程序。

🌳JS包管理工具npm、yarn、pnmp

🍁npm(Node Package Manager)

官网:https://www.npmjs.com/
npm是一个开源的软件包管理器,最初是为Node.js设计的。npm使JavaScript开发人员可以轻松地安装、更新、卸载和共享代码包,同时还提供了一些其他功能,如与不同版本的软件包协作、包发布和代码包管理。npm已经成为最流行的JavaScript软件包管理器之一,并且在全球范围内使用广泛。

🍁pnpm(Performant Node Package Manager)

官网:https://pnpm.io/
pnpm是另一个开源的软件包管理器,它的目标是提高包的安装速度和存储效率。pnpm使用了一些与npm不同的技术来实现这一目标,例如将软件包的多个版本存储在一个地方,而不是每个项目都有一个本地副本。这使得pnpm更加适合于大型项目和频繁的软件包更新,同时还减少了磁盘空间和网络带宽的使用。

🍁yarn

官网:https://yarnpkg.com/
yarn也是一个开源的软件包管理器,由Facebook创建。它旨在解决npm的一些缺点,例如性能问题和依赖性管理。yarn的特点是速度快、安全性高、可靠性强,同时还支持并行下载和缓存软件包,这使得它成为许多JavaScript开发人员的首选包管理器。

🌳JS打包工具 webpack,vite,rollup,Parcel

🍁webpack

官网:https://webpack.js.org/

webpack是一个模块打包工具,它可以将各种模块和资源打包成一个或多个静态资源,以便于在浏览器中加载和运行。webpack支持各种前端开发场景,包括单页面应用、多页面应用、组件库等,它可以自定义配置,支持各种插件和Loader,可以处理JS、CSS、图片、字体等资源。webpack 5是最新版本,它支持了更快的构建速度、更好的Tree-Shaking、更小的Bundle大小等特性。

🍁vite

官网:https://vitejs.dev/

vite是一个基于ES Modules的快速开发工具,它可以在开发时使用原生的ES Modules导入和引用模块,不需要预先打包。vite利用了ES Modules的特性,在浏览器中动态的解析和编译模块,从而实现快速的开发和热更新。vite支持各种前端框架,包括Vue、React、Svelte等,它也可以自定义配置,支持各种插件和Loader。

🍁rollup

官网:https://rollupjs.org/guide/en/

rollup是一个JavaScript模块打包器,专门用于打包JavaScript库和组件,它支持将多个模块打包成一个单独的文件,从而减少了冗余的代码和依赖。rollup支持ES Modules、CommonJS、AMD等模块规范,它可以处理JS、CSS、JSON等资源。rollup的打包结果更加优化和精简,适用于开发JavaScript库和组件。

🍁Parcel

官网:https://parceljs.org/

Parcel是一个快速、零配置的Web应用程序打包器,它支持各种资源打包,包括JS、CSS、HTML、图像等,它可以自动解析依赖关系,不需要任何配置即可使用。Parcel的打包结果优化和精简,它支持热更新和缓存机制,适用于快速开发和原型制作。Parcel 2是最新版本,它支持了更快的构建速度和更好的Tree-Shaking等特性。


包管理工具和打包工具的关系

JavaScript打包工具和包管理工具是两个不同的工具,但它们之间有紧密的联系。包管理工具提供命令行支持,用来运行包管理工具。

包管理工具是用于管理和安装JavaScript代码包的工具,例如npm和Yarn。它们可以让开发者轻松地查找、安装、更新和删除依赖包。这些工具使开发者能够更轻松地管理项目的依赖关系,以及在不同环境中共享和重复使用代码。

打包工具则用于将JavaScript代码打包为可在浏览器或服务器中运行的单个文件。一些流行的JavaScript打包工具包括Webpack、Rollup和Parcel。这些工具可以将多个JavaScript文件组合成一个或多个捆绑包,并且还能够通过使用代码分割技术,实现按需加载。

虽然包管理工具和打包工具是两个独立的工具,但它们通常会一起使用。包管理工具用于安装和管理依赖项,而打包工具用于将这些依赖项打包到一个或多个文件中,以便于在运行时加载。通过将这两个工具结合使用,开发者可以更轻松地管理和构建JavaScript项目。

相关文章:

JS运行环境、包管理、打包工具总结

🌳JS运行环境-node.js 运行环境就是代码解析和执行的程序,比如jvm等虚拟机,他们的主要工作就是根据设定的语法规则解析编译代码,然后运行代码。 js的语法规则遵循ES规范。 🍁node.js Node.Js官网 Node.js是一种基于Ch…...

day4网络编程(广播和组播)

1.广播 发送端&#xff08;类似于客户端&#xff09; 流程&#xff1a; 创建套接字 填充接收端&#xff08;服务器&#xff09;网络信息结构体 bind(非必须绑定) 设置允许广播 向接收端&#xff08;服务器&#xff09;发送数据 关闭套接字文件 #include <stdio.h> #in…...

Vue3 自动引入组件及函数、动态生成侧边栏路由

Vue3 自动引入组件及函数、动态生成侧边栏路由 1、安装依赖 npm install -D unplugin-auto-import unplugin-icons unplugin-vue-components插件使用说明 unplugin-auto-import 说明 —— 自动引入函数、组件 unplugin-vue-components 说明 —— 自动注册组件 unplugin-ic…...

人工智能交互系统界面设计

文章目录前言一、项目介绍二、项目准备三、项目实施1.导入相关库文件2.人脸信息验证功能3.语音交互与TCP数据通信4.数据信息可视化四、相关附件前言 在现代信息化时代&#xff0c;图形化用户界面&#xff08;Graphical User Interface, GUI&#xff09;已经成为各种软件应用和…...

蓝桥杯嵌入式第一课--创建工程

概述学习本节之前&#xff0c;必须要先安装好 keil5 以及 CubeMX 等软硬件环境&#xff0c;如果你已经安装完成&#xff0c;请告诉自己&#xff1a;考试现在开始&#xff01;从CubeMX开始CubeMX是创建工程模板的软件&#xff0c;也是我们比赛时第一个要进行操作的软件。一、选择…...

Java面向对象:接口的学习

本文介绍了Java中接口的基本语法, 什么是接口, java中的接口 语法规则, 接口的使用,接口的特性,如何实现多个接口,接口间的继承,以及抽象类和接口的区别 Java接口的学习一.接口的概念二.Java中的接口1.接口语法规则2.接口的使用3.接口的特性4.实现多个接口5.接口间的继承三.抽象…...

西瓜视频登录页面

题目 代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>登录页面</title><style>td{width: 160px;height: 25px;}img{width: 20px;height: 20px;}.number, .password{background: rgba(0,0,0,.05);}.numbe…...

【springboot】常用快捷键:

Ctrl快捷键介绍Ctrl F在当前文件进行文本查找 &#xff08;必备&#xff09;Ctrl R在当前文件进行文本替换 &#xff08;必备&#xff09;Ctrl Z撤销 &#xff08;必备&#xff09;Ctrl Y删除光标所在行 或 删除选中的行 &#xff08;必备&#xff09;Ctrl X剪切光标所在行…...

宝塔控制面板常用Linux命令大全

宝塔面板是站长朋友们常见的一款服务器运维面板&#xff0c;可以通过 Web 端轻松管理服务器&#xff0c;提升运维效率。大家在服务器中安装宝塔面板会用到宝塔面板特定的脚本命令。今天这篇文章为大家整理汇总了宝塔面板常用Linux命令&#xff0c;这样方便大家收藏查找。 1、安…...

C语言实现单链表(超多配图,这下不得不学会单链表了)

目录 一&#xff1a;什么是链表&#xff1f; 二&#xff1a;创建源文件和头文件 (1)头文件 (2)源文件 三&#xff1a;实参和形参 四&#xff1a;一步步实现单向链表 &#xff08;1&#xff09;建立一个头指针并置空 &#xff08;2&#xff09;打印链表&#xff0c;便于…...

SQL编写优化技巧

一、底层原理 sql慢是因为没有走索引&#xff0c;因此需要添加索引然它走索引联合索引需要匹配最左匹配原则&#xff08;索引回表&#xff09;如果查询列超出索引的key&#xff0c; 会导致回表&#xff0c;回表数量多&#xff0c;则会走全表扫描 索引是分聚集索引、非聚集索引…...

【基础算法】单链表的OJ练习(6) # 复制带随机指针的链表 #

文章目录&#x1f347;前言&#x1f34e;复制带随机指针的链表&#x1f351;写在最后&#x1f347;前言 本章的链表OJ练习&#xff0c;是最后的也是最难的。对于本题&#xff0c;我们不仅要学会解题的思路&#xff0c;还要能够通过这个思路正确的写出代码&#xff0c;也就是思路…...

Activity生命周期完成EvenetLog回调

Activity 生命周期 系统EvenetLog回调 EventLog路径: Android13/frameworks/base/core/java/android/app/EventLogTags.logtags wm_on_create_called wm_on_restart_called wm_on_start_called wm_on_resume_called wm_on_top_resumed_gained_called wm_on_top_resumed_lost_c…...

西安石油大学C语言期末真题实战

很简单的一道程序阅读题&#xff0c;pa’默认为a【0】&#xff0c;接下来会进行3次循环 0 1 2 输出结果即可 前3题就是一些基础定义&#xff0c;在此不多赘述 要注意不同的数据类型的字节数不同 a<<2 b>>1&#xff08;b>>1;就是说b自身右位移一位&#xff08…...

【Shell】Shell变量

Shell变量系统预定义变量自定义变量基本语法定义变量撤销变量命名规则使用变量只读变量删除变量变量类型系统预定义变量 $HOME、$PWD、$SHELL、$SUSER等 实例 yysubuntu:~$ echo $HOME #查看系统变量的值 /home/yys yysubuntu:~$ set #显示当前shell中所有变量自定义变量…...

你是真的“C”——结构体中鲜有人知的“秘密”

你是真的“C”——结构体中的精髓剖析【内存对齐】 【位段】 &#x1f60e;前言&#x1f64c;结构体内存对齐&#xff1a;&#x1f60a;结构体内存对齐存在的意思是什么&#xff1f;&#x1f618;内存对齐例子详细剖析&#xff1a;&#x1f618;结构体中的位段&#xff1a;&…...

2023年“网络安全”赛项江苏省淮安市赛题解析(超详细)

2023年中职组江苏省淮安市“网络空间安全”赛项 ①.2023年中职组江苏省淮安市任务书②.2023年中职组江苏省淮安市解析③.需要环境或者不懂的可以私信博主!①.2023年中职组江苏省淮安市任务书 任务一:服务器内部信息获取 任务环境说明: 服务器场景:Server210510(关闭链接…...

【二分查找】

二分查找704. 二分查找35. 搜索插入位置34. 在排序数组中查找元素的第一个和最后一个位置结语704. 二分查找 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在…...

Vue学习 -- 如何用Axios发送请求(get post)Promise对象 跨域请求问题

什么是Axios Vue本身是不支持发送axios请求&#xff0c;需要使用第三方插件&#xff0c;这里推荐使用Axios&#xff0c;Axios是基于promise的HTTP库&#xff1b;它会从浏览器中创建XMLHttpRequset对象。 安装Axios npm install axios -S下载后把axios.js文件复制进项目目录 …...

TVS和稳压管的相同点和不同点

大家好,我是记得诚。 文章目录 介绍相同点不同点介绍 TVS和稳压管都是电路中很常用的电子元器件,都是二极管的一个种类。 TVS二极管全称是Transient voltage suppression diode,也叫瞬态电压抑制二极管。 稳压二极管英文名字Zener diode,又叫齐纳二极管。 关于稳压二极…...

微信小程序项目实例——扫雷

今日推荐&#x1f481;‍♂️ 2023许嵩演唱会即将到来&#x1f3a4;&#x1f3a4;&#x1f3a4;大家一起冲冲冲&#x1f3c3;‍♂️&#x1f3c3;‍♂️&#x1f3c3;‍♂️ &#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;往期优质项目实例&#x1f52e…...

2022-2023年度广东省职业院校学生专业技能大赛 中职组网络安全赛项竞赛规程

2022-2023年度广东省职业院校学生专业技能大赛 中职组网络安全赛项竞赛规程 一、赛项名称 赛项编号&#xff1a;Z27 赛项名称&#xff1a;网络安全赛项组别&#xff1a;中职 赛项归属&#xff1a;信息技术类 二、竞赛目的 为检验中职学校网络信息安全人才培养成效&#xff0c;促…...

超详细的堆排序,进来看看吧。

1.堆的基本概念1.1什么是堆堆是一种叫做完全二叉树的数据结构&#xff0c;1.2大堆和小堆大堆:每个节点的值都大于或者等于他的左右孩子节点的值小根堆:每个结点的值都小于或等于其左孩子和右孩子结点的值1.3完全二叉树节点之间的关系leftchild parent*2 1rightchild parent*…...

线性回归 特征扩展的原理与python代码的实现

文章目录1 多项式扩展的作用2 多项式扩展的函数2.1 接收参数2.2 多项式扩展示例3 多项式扩展的完整实例1 多项式扩展的作用 在线性回归中&#xff0c;多项式扩展是种比较常见的技术&#xff0c;可以通过增加特征的数量和多项式项的次数来提高模型的拟合能力。 举个例子&#…...

订阅关系一致

订阅关系一致指的是同一个消费者Group ID下所有Consumer实例所订阅的Topic、Tag必须完全一致。如果订阅关系不一致,消息消费的逻辑就会混乱,甚至导致消息丢失。本文提供订阅关系一致的正确示例代码以及订阅关系不一致的可能原因,帮助您顺畅地订阅消息。 背景信息 消息队列Ro…...

测试老鸟都在用的接口抓包常用工具以及接口测试工具都有哪些?

目录 接口 接口测试的重要性 常用抓包工具 常用接口测试工具 接口 接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间…...

Delphi 一个函数实现腾讯云最新版(API3.0)短信发送

目录 一、腾讯云短信基本知识 1. 需要在腾讯云后台注册账号 2. 需要在腾讯云中开通短信功能 3. 腾讯云短信版本说明 4. 短信内容的组成 特定规范 二、短信发送函数 三、下载源代码(收费) 一、腾讯云短信基本知识 如今我们随时都收到短信验证码&#xff0c;注册码等等。这是…...

2023年Android现代开发

2023年现代Android开发 下面与大家分享如何构建具有2023年最新趋势的Android应用程序。 Android是什么&#xff1f; Android 是一种基于 Linux 内核并由 Google 开发的开源操作系统。它用于各种设备&#xff0c;包括智能手机、平板电脑、电视和智能手表。 目前&#xff0c…...

自然语言处理(NLP)在医疗领域的应用

自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是计算机科学领域与人工智能领域中的一个重要方向。它研究能实现人与计算机之间用自然语言进行有效通信的各种理论和方法。在各个领域都有其应用。 其在生物医学领域迅速发展&#xff0c;已经…...

计算机中的浮点数运算

计算机中的浮点数 计算机中以固定长度存储浮点数的方式&#xff0c;造成了浮点数运算过程容易产生上溢和下溢。以float32为例, 其标记位占1bit,指数位占8bit,小数部分占23bit 经典下溢场景 不满足精度导致截断误差 #include <iostream> #include <iomanip> usin…...