使用 Parcel 和 NPM 脚本进行打包

news/2025/1/20 14:42:36/

使用 Parcel 和 NPM 脚本进行打包

Parcel

Parcel 是一个零配置的网页应用程序打包工具,主要用于快速构建现代 JavaScript 应用。

  • 我们可以使用npm直接安装它
npm install --save-dev parcel
//这将把 Parcel 添加到 devDependencies 中,表明它是一个开发工具,而不是应用程序在运行时所需的依赖包。

在这里插入图片描述

  • 使用npx运行parcel
npx parcel index.html
//这里的index.html是入口文件,因为我们的script.js就是由它来引入的

在这里插入图片描述

在这里插入图片描述

  • 成功运行之后,会生成一个用于生产,也就是推送给用户的文件夹

在这里插入图片描述

  • parcel支持热重载,一旦开发服务器启动,您在代码中所做的任何更改(如 JavaScript、CSS 或 HTML 文件)都会被 Parcel 自动检测到,并在浏览器中实时更新,无需手动刷新。
if (module.hot) {module.hot.accept();
}

注:在 JavaScript 中,对象是通过引用传递的。如果您在使用 lodash 的深度复制方法时,只是复制了对象的引用,之后的修改会影响到原始对象和复制对象。这意味着如果您在热重载时更新了某个模块中的对象,而没有正确处理引用,可能会导致对象内容不断增加。所以如果这不是我们需要的,需要你手动的去初始化对象

在这里插入图片描述

  • parcel也可以自动的将我们补全一些路径
// import cloneDeep from './node_modules/lodash-es/cloneDeep.js';
import cloneDeep from 'lodash-es'; //不需要写上面这么长的路径,parcel也可以自动的找到这个模块的功能;

在这里插入图片描述

npmparcel_57">使用npm脚本的方式启动parcel

使用 npm 脚本启动 Parcel 是一种常见的做法,可以简化开发和构建过程。

{"name": "starter","version": "1.0.0","main": "clean.js","scripts": {"start": "parcel index.html"},
  • 然后使用npm start或者npm run start启动parcel

在这里插入图片描述

  • 一般我们也需要使用parcel来生产构建,build 脚本将使用 Parcel 进行生产构建。
  "scripts": {"start": "parcel index.html","build": "parcel build index.html"},

在这里插入图片描述

  • 运行之后我们会发现一些文件被压缩了

在这里插入图片描述

  • 注:我们也可以在全局安装parcel,只要在后面加-g参数即可,这样它就跟live-server一样,不管在哪个文件夹,我们始终可以使用它,但是在实际开发中,却不经常使用,因为实际项目中的开发一般都是独立更新和独立管理依赖的;

http://www.ppmy.cn/news/1564677.html

相关文章

【Sanic 框架 / 1】深入学习:从入门到进阶

文章目录 一、基础知识学习(入门)Sanic 简介什么是 Sanic 框架?Sanic 的优势和适用场景1. 高性能2. 异步支持3. 简洁易用4. WebSocket 支持5. 灵活扩展 环境搭建1. 安装 Python(3.7 及以上版本)2. 创建虚拟环境3. 安装…

Java调用C/C++那些事(JNI)

一、引言 Java开发中,可能会遇到一些需要复用、移植C/C库的场景。 比如说,对于某些特定功能,C/C已有代码实现,但是Java没有。为了可以让Java成功使用该功能,有几种方式: 优势劣势将C/C代码翻译成Java代码…

基于 K-Means 聚类分析实现人脸照片的快速分类

注:本文在创作过程中得到了 ChatGPT、DeepSeek、Kimi 的智能辅助支持,由作者本人完成最终审阅。 在 “视频是不能 P 的” 系列文章中,博主曾先后分享过人脸检测、人脸识别等相关主题的内容。今天,博主想和大家讨论的是人脸分类问题。你是否曾在人群中认错人,或是盯着熟人的…

【氮化镓】香港科技大学陈Kevin-单片集成GaN比较器

一、引言(Introduction) GaN HEMT的重要性 文章开篇便强调了氮化镓(GaN)高电子迁移率晶体管(HEMT)在下一代功率转换系统中的巨大潜力。GaN HEMT具备高开关频率、低导通电阻、高击穿电压以及宽工作温度范围等优势,使其成为功率电子领域的热门研究对象。这些特性使得GaN…

2025.1.18——1300

2025.1.18——1300 A 1300 There are n n n cities located on the number line, the i i i-th city is in the point a i a_i ai​. The coordinates of the cities are given in ascending order, so a 1 < a 2 < ⋯ < a n a_1 < a_2 < \dots < a_n a…

浅谈 JVM

JVM 内存划分 JVM 内存划分为 四个区域&#xff0c;分别为 程序计数器、元数据区、栈、堆 程序计数器是记录当前指令执行到哪个地址 元数据区存储存储的是当前类加载好的数据&#xff0c;包括常量池和类对象的信息&#xff0c;.java 编译之后产生 .class 文件&#xff0c;运…

【springboot 集成 mybatis-plus】

springboot 集成 mybatis-plus 前言实战代码生成器自动填充字段 前言 正如MyBatis-Plus官网所说&#xff0c;MyBatis-Plus 是一个 MyBatis 的增强工具&#xff0c;提供了强大的CRUD操作&#xff0c;支持主键自动生成&#xff0c;代码生成器&#xff0c;自动填充字段等等&#…

【ComfyUI专栏】ComfyUI的环境配置

对于常规的用户来说,我们碰到需要非常注意的问题,就是我们的ComfyUI的各个节点可能会有不兼容的情况,因此我们最好建立独立的Python虚拟环境。如何建立虚拟的环境呢?其实非常简单。 执行的命令如下: Python -m venv venv #创建Venv名称的虚拟环境 cd venv #进入到Venv …