使用 Parcel 和 NPM 脚本进行打包

news2025/1/20 21:13:50

使用 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也可以自动的找到这个模块的功能;

在这里插入图片描述

使用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.coloradmin.cn/o/2279525.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构——堆(介绍,堆的基本操作、堆排序)

我是一个计算机专业研0的学生卡蒙Camel🐫🐫🐫(刚保研) 记录每天学习过程(主要学习Java、python、人工智能),总结知识点(内容来自:自我总结网上借鉴&#xff0…

要获取本地的公网 IP 地址(curl ifconfig.me)

文章目录 通过命令行查询(适用于 Linux/Mac/Windows)Linux/MacWindows 注意事项 要获取本地的公网 IP 地址,可以通过以下简单的方法: 通过命令行查询(适用于 Linux/Mac/Windows) Linux/Mac 打开终端。输入…

【博客之星】2024年度个人成长、强化学习算法领域总结

📢在2025年初,非常荣幸能通过审核进入到《2024年度CSDN博客之星总评选》TOP300的年度评选中,排名40。这还是第一次来到这个阶段,作为一名博士研究生,还是备受鼓舞的。在这里我将以回顾的方式讲述一下这一年在CSDN中走过…

GoLang教程004:流程控制和if语句介绍

文章目录 3、流程控制3.1 流程控制的作用3.2 控制语句的分类3.3 if分支3.3.1 单分支3.3.2 多分支3.3.3 双分支 3、流程控制 3.1 流程控制的作用 流程控制的作用:流程控制语句是用来控制程序中各语句执行顺序的语句,可以把语句组合成能完成一定功能的小…

【Web】2025-SUCTF个人wp

目录 SU_blog SU_photogallery SU_POP SU_blog 先是注册功能覆盖admin账号 以admin身份登录,拿到读文件的权限 ./article?filearticles/..././..././..././..././..././..././etc/passwd ./article?filearticles/..././..././..././..././..././..././proc/1…

uniApp开通uniPush1.0个推,SpringBoot集成uniPush1.0个推

uniApp开通unipush1.0个推,SpringBoot程序集成 一、APP开通unipush1.0个推(商户App源码仅支持1.0个推) 1.app模块配置开通推送 2.应用开通推送 3.开通后点击消息推送菜单会看到如下页面 完成以上步骤后 此时android 仅支持在线推送。 4.配置各厂商离线推送 暂未…

华为昇腾910B1基于 LoRA 的 Qwen2.5-7B-Instruct 模型微调

目录 系统环境虚拟环境微调模型yaml文件training_losstraining_eval_loss 系统环境 Ascend-hdk-910b-npu-driver_24.1.rc3_linux-aarch64.run Ascend-hdk-910b-npu-firmware_7.5.0.1.129.run Ascend-cann-toolkit_8.0.RC3.alpha003_linux-aarch64.run Ascend-cann-kernels-910…

窥探QCC518x/308x系列与手机之间的蓝牙HCI记录与分析 - 手机篇

今天要介绍给大家的是, 当我们在开发高通耳机时如果遇到与手机之间相容性问题, 通常会用Frontline或Ellisys的Bluetooth Analyzer来截取资料分析, 如果手边没有这样的仪器, 要如何窥探Bluetooth的HCI log.这次介绍的是手机篇. 这次跟QCC518x/QCC308x测试的手机是Samsung S23 U…

【GIS操作】使用ArcGIS Pro进行海图的地理配准(附:墨卡托投影对比解析)

文章目录 一、应用场景二、墨卡托投影1、知识点2、Arcgis中的坐标系选择 三、操作步骤1、数据转换2、数据加载3、栅格投影4、地理配准 一、应用场景 地理配准是数字化之前必须进行的一项工作。扫描得到的地图数据通常不包含空间参考信息,需要通过具有较高位置精度的…

【云岚到家】-day02-客户管理-认证授权

第二章 客户管理 1.认证模块 1.1 需求分析 1.基础概念 一般情况有用户交互的项目都有认证授权功能,首先我们要搞清楚两个概念:认证和授权 认证: 就是校验用户的身份是否合法,常见的认证方式有账号密码登录、手机验证码登录等 授权:则是该用…

VUE学习笔记(入门)5__vue指令v-html

v-html是用来解析字符串标签 示例 <!doctype html> <html lang"en"> <head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document<…

二、华为交换机 Trunk

一、Trunk功能 Trunk口主要用于连接交换机与交换机&#xff08;或路由器&#xff09;&#xff0c;允许在一条物理链路上传输多个VLAN的数据。这大大增加了网络的灵活性和可扩展性&#xff0c;使得不同VLAN之间的通信变得更加便捷。 二、作用原理 标签处理&#xff1a;Trunk口能…

基于SSM的自助购药小程序设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

AI守护煤矿安全生产:基于视频智能的煤矿管理系统架构解析

前言 本文我将介绍我和我的团队自主研发设计的一款AI产品的成果展示——“基于视频AI识别技术的煤矿安全生产管理系统”。 这款产品是目前我在创业阶段和几位矿业大学的博士共同从架构设计、开发到交付的全过程中首次在博客频道发布, 我之前一直想写但没有机会来整理这套系统的…

SpringCloud -根据服务名获取服务运行实例并进行负载均衡

Nacos注册中心 每个服务启动之后都要向注册中心发送服务注册请求&#xff0c;注册中心可以和各个注册客户端自定义协议实现服务注册和发现。 pom.xml <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-na…

LLM - 大模型 ScallingLaws 的 CLM 和 MLM 中不同系数(PLM) 教程(2)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/145188660 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 Scalin…

Android CustomTextField

在 Compose 中开发用户界面时&#xff0c;需要处理输入框和键盘的交互&#xff0c;例如在键盘弹出时调整布局位置&#xff0c;避免遮挡重要内容。本篇博客将通过一个完整的示例展示如何实现这一功能。 功能概述 本例实现了一个简单的输入框。当输入框获得焦点或输入文字时&…

【韩顺平Java笔记】第8章:面向对象编程(中级部分)【338-342】

338. 零钱通消费 package com.masterspark.smallchange;import java.text.SimpleDateFormat; import java.util.Date; import java.util.Scanner;public class SmallChangeSys {public static void main(String[] args) {//1. 先完成显示菜单&#xff0c;并可以选择菜单&#…

Mac M1处理器uiautomatorviewer 使用

问题 Android自带工具uiautomatorviewer在mac电脑上运行报错 解决 有位大神解决了这个问题 项目网址&#xff1a;https://github.com/TarCV/uiautomatorviewer-gradle ./gradlew installDist JAVA_OPTS-XstartOnFirstThread ./build/install/uiautomatorviewer-gradle/bin…

【漫话机器学习系列】054.极值(Extrema)

极值&#xff08;Extrema&#xff09; 定义 极值是数学分析和优化问题中的一个核心概念&#xff0c;指函数在某个定义域内取得的最大值或最小值。根据极值的性质&#xff0c;可以将其分为两类&#xff1a; 局部极值&#xff08;Local Extrema&#xff09;&#xff1a;函数在…