使用 Parcel 和 NPM 脚本进行打包

embedded/2025/1/21 11:46:18/

使用 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/embedded/155760.html

相关文章

【Leetcode 热题 100】70. 爬楼梯

问题背景 假设你正在爬楼梯。需要 n n n 阶你才能到达楼顶。 每次你可以爬 1 1 1 或 2 2 2 个台阶。你有多少种不同的方法可以爬到楼顶呢? 数据约束 1 ≤ n ≤ 45 1 \le n \le 45 1≤n≤45 解题过程 昨天刚刚当成扩展题做过,今天遇到了再写一次。…

C++,设计模式,【目录篇】

文章目录 1. 简介2. 设计模式的分类2.1 创建型模式(Creational Patterns):2.2 结构型模式(Structural Patterns):2.3 行为型模式(Behavioral Patterns): 3. 使用设计模式…

redis.call()和redis.pcall()的区别

redis.call() 与 redis.pcall()很类似, 他们唯一的区别是当redis命令执行结果返回错误时, redis.call()将返回给调用者一个错误,而redis.pcall()会将捕获的错误以Lua表的形式返回 redis.call() 和 redis.pcall() 两个函数的参数可以是任意的 Redis 命令&…

PHP语言的语法糖

PHP语言的语法糖 引言 在现代编程语言中,语法糖(Syntactic Sugar)是指一些改善用户体验的语言特性,使得某些语法更加简洁、易用。PHP作为一种广泛使用的服务器端脚本语言,自然也不例外。它大量引入了语法糖&#xff…

gitlab使用多数据库

1. 说明 默认情况下,GitLab 使用一个单一的应用数据库,称为主数据库。为了扩展 GitLab,您可以将 GitLab 配置为使用多个应用数据库。 设置多个数据库后,GitLab 将使用第二个应用数据库用于 CI/CD 功能,称为 CI 数据库…

Linux:生产者消费者模型

一、普通生产者消费者模型 1.1 什么是生产者消费者模型 现实生活中,我们也会有像生物世界的生产者和消费者的概念,但是我们的消费者在大多数情况下并不和生产者直接联系,就比如说食物,不能说我今天去找供货商要十个面包&#xff…

作品显示ip属地与定位哪个是真实的

在数字化时代,随着社交媒体的普及和网络内容的多样化,我们经常在各类平台上看到作品(如图片、视频、文章等)附带IP属地或定位信息。这些信息似乎都在告诉我们作品的来源地,但究竟哪个是真实的?IP属地与定位…

web-view环境下,H5页面打开其他小程序

在Web-view环境下,H5页面无法直接打开其他小程序。正确的实现方式是先从H5页面跳转回当前小程序,再由当前小程序跳转到目标小程序。具体实现方法如下: H5页面跳转回小程序时,调用wx.miniProgram.navigateTo()方法。 小程序跳转到…