详解Parcel:快速,零配置web应用打包工具。

译者按: 新一代Web应用打包工具Parcel横空出世,快速、零配置的特点让人眼前一亮。

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

Parcel有什么特别的,我为什么要关心它?

虽然webpack提供了非常多灵活的配置,但是与之带来的是复杂度的提升,而Parcel却非常的简洁。Parcel自己的口号也是非常直白:零配置。

为什么这么神奇?— Parcel有一个开箱即用的开发服务器。 开发服务器会在您更改文件时自动重建您的应用程序,并支持热模块重载以实现快速开发。

Parcel有什么好处?

  • 快速捆绑时间 - Parcel比Webpack,Rollup和Browserify更快。

然而需要注意的是:Webpack仍然很棒,有时可能会更快

  • Parcel支持JS,CSS,HTML,file assets等等,并且不需要插件配置,用户体验更友好。
  • 零配置需要:开箱即用的代码分割,热模块重新加载,css预处理器,开发服务器,缓存等等!
  • 更友好的错误日志。

Fundebug:及时发现Bug,提高Debug效率!

什么情况下使用Parcel,Webpack或Rollup?

其实主要取决于你自己,但我个人会通过以下情况来选择适合的:

Parcel: 中小型项目(1.5万行代码以内)。 Webpack: 大型企业规模项目。 Rollup: 用于NPM包。

安装非常简单

npm install parcel-bundler --save-dev

我们在本地安装了 parcel-bundler的npm包,现在我们需要初始化一个node项目。

接下来,创建index.htmlindex.js 文件。

index.htmlindex.js 关连起来。

最后将parcel脚本添加到我们的package.json

这就是所有的配置,是不是非常简单。

接下来,让我们开启服务器。

效果明显了,大佬们请注意构建时间!

15ms?! 是不是很牛逼!

再看一下HMR

也感觉非常快啊。

SCSS

同样先需要装node-sass

npm i node-sass && touch styles.scss

接下来,添加一些样式并将styles.scss导入index.js文件。

生产构建

我们所需要的只是将一个build脚本添加到我们的package.json

运行build脚本

看看Parcel如何让我们的生活变得轻松?

你可以像这样指定一个特定的build路径:

parcel build index.js -d build/output

Fundebug错误实时监控为您的React项目保驾护航!

React

设置React非常简单,我们需要做的就是安装我们的依赖并设置我们的.babelrc

npm install --save react react-dom babel-preset-env babel-preset-react && touch .babelrc

来写个初始化React组件玩玩吧!

Fundebug错误实时监控为您的Vue项目保驾护航!

Vue

首先安装vueparcel-plugin-vue ,其中parcel-plugin-vue用于.vue组件支持。

$ npm i --save vue parcel-plugin-vue

需要添加我们的根元素,导入vue的index文件并初始化Vue。

首先生成个vue目录,然后创建index.jsapp.vue

$ mkdir vue && cd vue && touch index.js app.vue

index.html引用ndex.js

最后,让我们初始化vue并编写我们的第一个vue组件!

TypeScript

这个非常简!只需安装TypeScript,我们就可以开始。

npm i --save typescript

创建index.ts文件并将其插入index.html

推荐

版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2018/06/01/parcel/

您的用户遇到BUG了吗?

体验Demo 免费使用

.copyright * { box-sizing: border-box; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cloudskyme

JavaFX——(第一篇:介绍篇)

什么是JavaFX JavaFx平台是一个富客户端平台解决方案,它能够使用应用程序开发人员轻松的创建跨平台的富客户端应用程序。它构建在Java技术的基础之上,J...

5516
来自专栏cloudskyme

jbpm5.1介绍(12)

GWT是什么 如今,编写网络应用程序是一个单调乏味且易于出错的过程。开发人员可能要花费 90% 的时间来处理浏览器行话。此外,构建、重复使用以及维护大量 Ja...

3524
来自专栏Dawnzhang的开发者手册

你真的了解博客园的目录么。。

非常感谢这位盆友能发现这个问题,奖励鸡腿,这是那篇博文:要嫁就嫁程序员,因为。。。

1604
来自专栏逸鹏说道

Pycharm For Linux

之前说过JetBrains系列的破解方式:https://www.cnblogs.com/dunitian/p/8478252.html

1153
来自专栏张戈的专栏

你知道Windows和WordPress上帝模式吗?

一、Windows 上帝模式 这个玩意出来很久很久了,估计不用多说,知道的同学还是挺多的,不知道的也只要百度一下,你就知道了。 方法很简单,在 Windows ...

3576
来自专栏Youngxj

RevolverMaps-给你的博客加上3D地球造访者

2214
来自专栏DeveWork

WordPress 网站开发“微信小程序”实战(四)

本站微信小程序版“DeveWork极客”在中文WP 圈子可谓是一直被模仿,从未被超越。如今快速迭代,写作本文的现在是1.6 版本。作为“WordPress 开发...

2596
来自专栏小文博客

Archtek主题汉化中文版——高端大气的WordPress企业主题(功能十足)

3352
来自专栏听雨堂

live writer的折腾

想用live writer在博客上粘贴一点js代码,结果老是粘贴不上,于是怀疑自己的live writer版本是否太低了,于是在网上找了半天,结果很失败。最新...

2008
来自专栏前端儿

前端调试的那些手段

在不同的平台,不同的环境下的调试方法也不尽相同,这个系列文章将探索常见的一些前端调试场景,较为系统地整理出一些调试方法。

1433

扫码关注云+社区