资讯专栏INFORMATION COLUMN

新一代打包神器parcel简介

Jenny_Tong / 1357人阅读

摘要:友好的错误记录体验,语法突出显示的代码帧有助于查明问题。为入口资源创建一个,并为动态导入的资源创建子,这回导致代码拆分的发生。如果一个资源需要多个,它会被打包到最近的共同祖先,因此它不会被包含多次。

官方地址:https://parceljs.org/getting_...

Parcel 是 Web 应用打包工具,适用于经验不同的开发者。它利用多核处理提供了极快的速度,并且不需要任何配置。

特性

快速打包:多核编译,以及文件系统缓存,即使在重新启动之后也能快速重新构建。

支持JS、CSS、HTML、文件资源等,不需要安装任何插件。

在需要的时候自动使用Babel、PostCSS和PostHTML自动转换模块,甚至是node_modules。

零配置,代码拆分,使用动态import语句分隔。

内置支持模块热替换。

友好的错误记录体验,语法突出显示的代码帧有助于查明问题。

工作方式

parcel 将资源树转换为 bundle 树。许多其它的打包工具基本上都是基于 JS 资源,其它格式都是粘贴的-例如,默认情况下以字符串的形式内嵌到 JS 中。parcel 是文件类型无关的-它可以按照你期望的方式与任何类型的资源一起工作,无需配置。

parcel 将一个入口点作为输入,可以是任何类型的:JS文件,HTML,CSS,image 等。在 parcel 中定义了各种资源类型,它们知道如何处理特定的资源类型。资源文件被解析,它的依赖关系被提取,并转换成最终的编译形式。这创建了一个资源树。

一旦资源树被构建,资源就被放入一个bundle树中。为入口资源创建一个 bundle,并为动态导入的资源创建子 bundle,这回导致代码拆分的发生。当导入不同类型的资源的时候就会创建子 bundle,例如如果你在 JavaScript 中导入 CSS 文件,它就会打包成对应 JavaScript 的兄弟 bundle。如果一个资源需要多个bundle,它会被打包到最近的共同祖先,因此它不会被包含多次。

在构建bundle树之后,每一个包都有特定的文件类型的包装器写入文件。打包器知道如何将每个资源的代码合并到由浏览器加载的最终文件中。

入门

安装

yarn global add parcel-bundler

npm install -g parcel-bundler

Parcel 可以将任何类型的文件作为 entry point(入口点),但是 HTML 或 JavaScript 文件是一个很好的开始。如果你使用相对路径将你的主 JavaScript 文件链接到 HTML 中,Parcel 也会为你处理,并将该引用替换为输出文件的URL。



  

console.log("hello world");

Parcel 内置了一个开发服务器,这会在你更改文件时自动重建你的应用程序,并支持 模块热替换 ,以便你快速开发。你只需指定 入口文件 即可:

parcel index.html

webpack与parcel比较

Webpack 打包时间 = parse string n + transform n + parse to AST + compress

Parcel 打包时间 = parse to AST + transform * n + compress

Webpack 之所以有时感觉很慢,是因为代码转译全靠 loader 进行字符串处理。比如一个 index.js 有可能要经历 loaderA -> loaderB -> loaderC,这些 loader 完全不知道彼此之间的存在,都是接过来一个字符串自己处理,然后再交给下一个。如果最后再 uglify 一下还要先 parse 为 AST(抽象语法树) 再压缩,这一步也是比较耗时的。

因此,parcel 至少为我们提供了一个很好的思路:多步转译 + 压缩时,每一步都可以利用到已经解析过后的 AST,只要完成各自的 transform 即可。

使用parcel的优势

零配置,只需要将它指向应用程序入口点,就能正常工作

构建快速,具有文件系统缓存,可以保存每个文件的编译结果

parcel的转换工作在AST上,每个文件只有一个解析,多个转换以及一个代码生成

原文链接:https://github.com/parcel-bun...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93293.html

相关文章

  • 2018前端值得关注的技术

    摘要:年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。自从谷歌提出后,就持续的获得了业界的关注,热度可见一斑。就在今年,谷歌也宣布将获得与安卓原生应用同等的待遇与权限。但是无论都值得关注。 1.前言 2017悄然过去,2018已经来到。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测判断,希望能对大家...

    xiao7cn 评论0 收藏0
  • 2018前端值得关注的技术

    摘要:年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。自从谷歌提出后,就持续的获得了业界的关注,热度可见一斑。就在今年,谷歌也宣布将获得与安卓原生应用同等的待遇与权限。但是无论都值得关注。 1.前言 2017悄然过去,2018已经来到。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测判断,希望能对大家...

    用户84 评论0 收藏0
  • Javascript 打包工具

    摘要:所以,打包工具就出现了,它可以帮助做这些繁琐的工作。打包工具介绍仅介绍款主流的打包工具,,,,以发布时间为顺序。它定位是模块打包器,而属于构建工具。而且在其他的打包工具在处理非网页文件比如等基本还是需要借助它来实现。 本文当时写在本地,发现换电脑很不是方便,在这里记录下。 前端的打包工具 打包工具可以更好的管理html,css,javascript,使用可以锦上添花,不使用也没关系...

    Sleepy 评论0 收藏0
  • 汇总2017JS项目,总结我们从中学到了什么?

    摘要:个人感悟自己公司也有项目在用,学的难点在于,其他的话上手挺快的,而且是尤大写的,中文文档也很完整,很适合新手。 showImg(https://segmentfault.com/img/remote/1460000012922985?w=1000&h=958); 当红辣子鸡——vue 和去年一样,vue是js项目中点赞数增加最多的,我们可以看下图: showImg(https://se...

    dantezhao 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<