包裹,更简单的Webpack

Parcel是一个Web应用程序捆绑程序。它在webpack的同一工具类别中,具有不同的价值主张。包裹承诺可以做很多事情而无需任何配置,而且速度也很快。

Parcel是一个Web应用程序捆绑程序。

与以下工具类别相同网页包,具有不同的价值主张。

它的主要功能包括

  • 资产捆绑(JS,CSS,HTML,图像)
  • 零配置代码拆分
  • 使用自动转换巴别塔的CSS和PostHTML
  • 热模块更换
  • 缓存和并行处理,可加快构建速度

Parcel承诺无需任何配置即可完成所有这些工作,而且速度也很快。

安装

使用以下方式安装包裹

yarn global add parcel-bundler

或者npm

npm install -g parcel-bundler

启动包裹

包裹可以使用开始

parcel watch index.html

它将开始从HTML页面源中扫描资产,并将其处理的任何引用替换为输出文件。

您还可以将Parcel指向JS文件:

parcel watch entry.js

开发服务器

方便的是,Parcel带有内置的开发服务器,因此您无需设置服务器。您可以从以下内容开始:

parcel index.html

生产就绪包

当您对应用程序满意并想要创建可用于生产环境的捆绑包时,请运行

parcel build index.html

生产捆绑包禁用热模块更换,并且不监视您的更改,生产捆绑包一旦存在,它就存在,并使用缩小器。

它还会自动触发NODE_ENV可变为production,以使库生成生产代码(例如React和Vue使用此约定)

资产

JavaScript

包裹都支持ES模块import...) 和普通JSrequire...)。

它执行使用动态导入自动进行代码拆分

这是什么意思,为什么有用?

动态导入会返回一个承诺,而不是在应用程序启动时加载所有依赖项,我们可以要求浏览器加载它们,但仅在它们准备就绪时才执行应用程序的某些部分。

或者,我们可以要求浏览器仅在需要时才加载它们,例如,当用户单击特定链接时。

代码分割更多细节。

CSS

包裹支持普通的CSS,Sass,Less和Stylus。

您可以使用编写CSSCSS模块

变身

当Parcel发现您具有以下其中一项的配置时

  • 通天塔(.babelrc
  • PostCSS(.postcssrc
  • PostHTML(.posthtmlrc

它将在捆绑过程中自动使用它。

热模块更换

生成应用程序时,热模块更换(HMR)是有用的功能。当我们保存CSS或JavaScript的新副本时,HMR将负责在浏览器中更新模块,而无需刷新整个应用程序。

这很酷,特别是如果您的应用程序具有许多状态需要触发以测试特定功能(例如,“转到设置,单击此选项,键入...”),则该选项很酷。

包裹与Webpack

让我们将Parcel与webpack进行比较,因为它非常流行,您可能听说过或在项目中使用过。即使您从未使用过任何区别,也很高兴知道它们之间的区别。

webpack允许您做很多事情,尽管这很酷,但也意味着我们需要仔细配置它以完全执行我们想要的事情。

有时webpack.config.js文件增长到数百行,我们将其复制/粘贴到下一个项目,如果需要修改它会很麻烦。

包裹承诺我们会做很多webpack的事情,但是完全没有任何配置, 靠配置约定

webpack 4主要是为了响应Parcel的成功,引入了零配置模式,并带有一些约定,而不是总是需要配置。

虽然webpack有数以千计的插件,包裹有一些,但并未在网站上进行宣传,这表明Parcel的开发人员希望我们避免使用插件,直到我们由于无法适应Parcel的约定而无法真正避免使用插件,或者使Parcel支持它所支持的某种东西不开箱即用。

您应该使用哪一个?我会建议将Parcel用于小型项目,如果您无法使用Parpack,并且希望对模块捆绑器所做的一切进行绝对控制,则建议使用webpack。


更多devtools教程: