一、关于Parcel

Parcel是一款完全零配置的前端打包器，它提供了近乎傻瓜式的使用体验，我们只需要了解它提供的几个简单的命令，就可以直接使用它去构建我们的前端应用程序了。

二、使用Parcel

先初始化一个项目中的package.json，yarn init --yes
然后我们就可以安装parcel所对应的模块parce-bundler，yarn add parcel-bundler --dev，他在node_modules/bin中为我们提供了parcel的cli程序，后续我们就可以使用这个cli对我们的程序进行打包。

在项目根目录下创建src/index.html，这个html会作为parcel的打包入口文件，虽然Parcel和Webpack一样可以以任意类型的文件作为打包入口，不过Parcel官方建议我们以html作为打包入口，官方所给出的理由是：因为html是运行在浏览器端的应用入口，所以使用html作为打包入口。

以下为示例代码：
index.html

...
<body><script src="main.js"></script>
</body>

main.js

import foo from './foo'
foo.bar()

foo.js

export default {bar: () => {console.log('hello parcel11~');}
}

执行打包，需要传入打包入口路径，yarn parcel src/index.html
我们执行这个命令，parcel就会根据我们传入的参数先去找到index.html文件，然后根据其中的script标签找到它引入的main.js文件，最后顺着import语句找到对应的foo模块，从而完成整体项目的打包。

打包结果如下：

parcel不仅帮我们打包了应用，还同时开启了开发服务器，这个开发服务器就与webpack中的devserver一样，可以实现自动刷新功能，只要我们对文件进行修改，就会重新打包，并刷新服务器。

如果我们需要模块热替换的体验，parcel中同样支持。

修改main.js

import foo from './foo'
foo.bar()
// 我们同样需要使用HMR提供的api，先用module.hot判断hot对象是否存在，存在就证明当前环境可以使用HMR的api
if(module.hot){// 使用module.hot.accept去处理热替换逻辑// 不过这里的accept和webpack的accept不太一样，webpack中的accept接收两个参数，用来处理指定模块更新后的逻辑// parcel中的accept只接收一个回调函数，作用就是当我们当前模块更新或者当前模块所依赖的模块更新过后会自动执行其中逻辑module.hot.accept(() => {console.log('有module.hot');})
}

修改点foo.js内容后，浏览器自动刷新了

除了热替换，Parcel还支持一个非常友好的功能，就是自动安装依赖。

例如，我们需要使用到jquery

import $ from "jquery"
import foo from './foo'
foo.bar()$(document.body).append('<h1>Hello Parcel~</h1>')
if(module.hot){module.hot.accept(() => {console.log('有module.hot');})
}

在文件保存过后，Parcel就会自动安装刚刚导入的模块，极大程度的避免了一些额外的手动操作。

除此之外，Parcel同样支持加载一些其他类型的资源模块，而且相比于其他的模块打包器，在Parcel中去加载任意资源的模块，同样是零配置的。

我们在src下新建一个style.css文件，随便写一些样式，然后在main.js中使用import "./style.css"执行，保存文件，我们的页面效果改变了。

图片也是一样的，在main.js中添加如下代码，保存后页面会显示图片。

import img from './058.jpg'
$(document.body).append(`<img src="${img}" style="width:100px;height:100px;"></img>`)

对于动态导入，Parcel也同样是支持的

// 记得将前面引入jquery的代码注释
import('jquery').then( $ => {$(document.body).append('<h1>Hello Parcel~</h1>')$(document.body).append(`<img src="${img}" style="width:100px;height:100px;"></img>`)
})

三、parcel打包

parcel以生产环境进行打包

yarn parce build src/index.html

对于相同体量的webpack打包，parcel会比webpack快很多，因为在parcel内部使用的是多进程同时去工作，充分发挥了多核CPU的性能，webpack中也可以使用一个happypack的插件去实现这一点。

对Parcel的使用学习相关推荐

Parcel Bundle漏洞学习
Bundle的序列化细节看上去还是有些复杂的,在之前已经讨论过,一般我们使用Parcel的时候,都是严格的write和read相对应.一些疏漏,不对应,竟然就可以成为漏洞, https://xz.al ...
TypeScript免费视频图文教程（2W字）
00. B站视频观看地址出这个教程也是为了迎接Vue3的推出,今晚更新最后一集视频后,开始更新Vue3视频. 01.TypeScript 简介和课程介绍我原本准备更新 Vue3.x 教程的,由于官 ...
web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
从 webpack 到全面拥抱 Parcel #1 探索 Parcel
最近大家都在关注一个很流行的类似 webpack 的前端构建工具 Parcel.这个库刚出来没多久(好像截至目前十几天),但是很受欢迎,看下图就知道. 所以值得一探! 官方地址:https://par ...
一篇文章一张思维导图看懂Android学习最佳路线
一篇文章一张思维导图看懂Android学习最佳路线先上一张android开发知识点学习路线图思维导图 Android学习路线从4个阶段来对Android的学习过程做一个全面的分析:Android初级 ...
Android：学习AIDL，这一篇文章就够了(下)
前言上一篇博文介绍了关于AIDL是什么,为什么我们需要AIDL,AIDL的语法以及如何使用AIDL等方面的知识,这一篇博文将顺着上一篇的思路往下走,接着介绍关于AIDL的一些更加深入的知识.强烈建议 ...
Android Binder 学习笔记
前言: Binder是Android给我们提供的一种跨进程通信方式.理解Binder能帮助我们更好的理解Android的系统设计,比如说四大组件,AMS,WMS等系统服务的底层通信机制就都是基于Bin ...
[整理]ADB命令行学习笔记
global driver # 元素定位 driver.find_element_by_id("id") # id定位 driver.find_element_by_name(&q ...
android java服务,Android进阶学习必会：Java Binder中的系统服务
前言这个知识点是Android进阶学习必须掌握的知识点之一,也是高阶Android架构师经常问到的点.在这里分想给大家,希望对大家的工作和学习有所帮助.喜欢本文的记得点赞关注哦~ 在前面的Andro ...
【数学】Why Study Math 为什么学习数学
看到下面的一些评论,很感动: You know, in CHina,most of people know how to learn mathmatics. But few of them know ...

对Parcel的使用学习

对Parcel的使用学习

一、关于Parcel

二、使用Parcel

三、parcel打包

对Parcel的使用学习相关推荐

最新文章

热门文章