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

前端战五渣学前端——初探Parcel急速打包

what is parcel

文中有视频,建议在wifi环境下观看,并使用电脑

为了传视频,发现自己的服务器带宽不行,特别卡,然后弄的oss,发现oss好便宜啊!!

parcel是什么呢???首先我们得了解,parcel做的事情跟webpack差不多,只是差不多。之前在官网出现过类似“开箱即用”、“0配置打包”等字样,看样子是一个主打简洁的一个打包工具。

之前我接触的打包工具有什么gulp,grunt,webpack,还听说过browserify和fis(听说过,没有用过)都是打包工具,但是当我发现有这么个parcel的时候,这玩意真的是另辟蹊径啊。在webpack中,js是“一等公民”,从我们在webpack配置入口文件是js就可以看出来。但是parcel竟然可以以html文件为入口文件,这我就感觉很牛逼了,毕竟我从一开始就认为html应该是最基础的,是用户或者说客户端最先接收到的文件,然后剩余的文件都是从html文件直接或者间接引入的。

parcel's Features

? 极速打包 Parcel——使用 worker 进程去启用多核编译。同时有文件系统缓存,即使在重启构建后也能快速再编译。

? 将你所有的资源打包——Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件。

? 自动转换——如若有需要,Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码.

✂️ 零配置代码分拆——使用动态import() 语法, Parcel 将你的输出文件束(bundles)分拆,因此你只需要在初次加载时加载你所需要的代码。

? 热模块替换——Parcel 无需配置,在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。

? 友好的错误日志——当遇到错误时,Parcel 会输出 语法高亮的代码片段,帮助你定位问题。

官网还在最后贴出与其他打包工具的打包速度对比(可见parcel是多以速度自豪)

是否有人跟我有一样的感觉,在一个需要测试或者熟悉某个库的时候,我很抵触去完全写一套webapck的配置,然后进行打包,才能看到真正的效果(可能有人说他们有事先写好的一个简单配置。。。额。。),所以之前真的很希望出现一个开箱即用,不需要态度配置,定制化的打包工具(webpack现已支持(⊙﹏⊙)),没想到啊,parcel就可以这样

废话不多说,how to use parcel

install

官方文档让我们直接全局安装,那我们就全局安装

npm install -g parcel-bundler
复制代码

这个时候我们已经就可以用parcel进行打包了

从上面我们可以看到,我们直接打包的时候,命令是parcel index.html,并且直接使用的是export / import照打不误,并且还有实时更新的功能。

react

我们工作中经常需要用到类似vue或者react的地方,我们公司用的react,所以我用react做演示,一样很快

这些视频我都没有加速,所以我们可以看出来,parcel的打包速度确实算是可以了,而且不需要配置babel或者postcss,因为parcel已经帮我们预设了一些,如果我们要改,当然也是可以的

自定义.babelrc

那我们来自己定义一下.babelrc,我们用ant design来试验一下。

这里不明白的可以看一下antd的文档,我们通过自定义.babelrc的内容,可以不用每次引入整个antd,不用单独引入antd的css文件。看效果我们只引入了antd的Button的组件。

scss and image

我们在写一个前端项目的时候,难免会用到。。。。肯定会用到css,而想less,sass这种预编译的语言肯定也都会用到,但是预编译,我们需要多一次转换,webpack中需要对应的loader来处理,但是parcel可以直接写

我在下面中提前保存了一张图片。

这里面偶然看见了parcel的一个特性,高亮的错误提示,很厉害啊,跟vue的类似,整个屏幕给你报错。。。。

这里面scss和图片我们都是直接饮用直接处理的

其余

我上面演示的只是parcel极少的一部分功能,parcel还可以打包多文件,还可以处理typescript啊,vue啊等文件

还可以进行线上打包,就是打包出来的代码是经过压缩过的。

我以为

其实我虽然感觉parcel很牛逼,几乎可以做到零配置就上手使用,但是对于现在复杂的工程化前端项目,千奇百怪的需求,对定制化要求极高的使用场景,我觉得parcel的用武之地不是很大

但是

我会用,就是在我看到一个新的库,一个感兴趣的插件,我肯定会用parcel来打包,因为不用考虑,直接打包看效果就ok了(虽然现在webpack)也可以做到了。。。。

不知道各位看官怎么看parcel这个打包工具呢???


我是前端战五渣,一个前端界的小学生。

转载于:https://juejin.im/post/5d0b0b245188256b150a38f0

相关文章:

  • Android程序员搞Web之HTNL(一)
  • mysql-proxy安装过程 (转)
  • Day3LJY
  • angular 摇树优化
  • EOS 坑 右击java文件封装成Web Service不弹界面
  • ./configure、make、make install 命令
  • div浮动+盒子模型+溢出隐藏+滚动条
  • JavaScript创建对象的四种方式
  • HttpServletResponse应用(转)
  • 体育竞技游戏的团队AI
  • 1-思科防火墙:搭建防火墙环境
  • 棋盘问题 dfs()基本的
  • URL 编码规则
  • TNS-01106: Listener using listener name LISTENER has already been started
  • C语言学习(三)--语句
  • 0x05 Python数据分析,Anaconda八斩刀
  • Codepen 每日精选(2018-3-25)
  • Elasticsearch 参考指南(升级前重新索引)
  • ES6 学习笔记(一)let,const和解构赋值
  • JavaScript的使用你知道几种?(上)
  • leetcode46 Permutation 排列组合
  • NLPIR语义挖掘平台推动行业大数据应用服务
  • quasar-framework cnodejs社区
  • SegmentFault 2015 Top Rank
  • Shell编程
  • 从 Android Sample ApiDemos 中学习 android.animation API 的用法
  • 从零开始在ubuntu上搭建node开发环境
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 使用common-codec进行md5加密
  • 这几个编码小技巧将令你 PHP 代码更加简洁
  • 最近的计划
  • media数据库操作,可以进行增删改查,实现回收站,隐私照片功能 SharedPreferences存储地址:
  • Nginx实现动静分离
  • # 手柄编程_北通阿修罗3动手评:一款兼具功能、操控性的电竞手柄
  • #我与Java虚拟机的故事#连载07:我放弃了对JVM的进一步学习
  • (6)添加vue-cookie
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (八十八)VFL语言初步 - 实现布局
  • (亲测有效)解决windows11无法使用1500000波特率的问题
  • (转)JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
  • .【机器学习】隐马尔可夫模型(Hidden Markov Model,HMM)
  • .NET 5种线程安全集合
  • .NET Core 成都线下面基会拉开序幕
  • .net oracle 连接超时_Mysql连接数据库异常汇总【必收藏】
  • .net 前台table如何加一列下拉框_如何用Word编辑参考文献
  • .NET和.COM和.CN域名区别
  • .NET教程 - 字符串 编码 正则表达式(String Encoding Regular Express)
  • .NET框架
  • /3GB和/USERVA开关
  • @Transactional类内部访问失效原因详解
  • @Transient注解
  • [ 云计算 | AWS 实践 ] 基于 Amazon S3 协议搭建个人云存储服务
  • [c++] 什么是平凡类型,标准布局类型,POD类型,聚合体
  • [C++]二叉搜索树
  • [Excel] vlookup函数