写点什么

关于 Parcel 你需要知道的所有内容:超快的 Web 应用打包器

  • 2018-01-14
  • 本文字数:1685 字

    阅读完需:约 6 分钟

看新闻很累?看技术新闻更累?试试下载 InfoQ 手机客户端,每天上下班路上听新闻,有趣还有料!

本文最初发布于 Medium 上 freeCodeCamp 的博客站点,经原作者授权由 InfoQ 中文站翻译并分享。

什么?又有一个打包器(bundler)/ 构建工具?是的——果真如此,演化和创新相结合为我们带来了Parcel:

https://parceljs.org/

Parcel 有什么特殊之处,为什么值得关注呢?

webpack 要有大量的配置,这样带来的成本就是复杂性——与此相对的,Parcel 带来了简洁性。Parcel 将自己标榜为“零配置”。

Parcel 内置了一个开发服务器,这个开发服务器能够在我们修改文件之时自动重新构建应用,为了加快开发,它还支持模块热替换。

Parcel 的好处是什么?

更快的构建速度:Parcel 比 Webpack、Rollup 和 Browserify 更快;

需要注意:Webpack 依然非常棒,有些场景下它仍然会更快一些。

Parcel 内置支持 JS、CSS、HTML、文件资产等等,这不需要插件,对用户会更加友好

零配置,内置了 code splitting、热模块加载、CSS 预处理、开发服务器、缓存等等;

Parcel 有更加用户友好的错误日志。

那么,我们该何时使用 Parcel、Webpack 或 Rollup 呢?

这完全取决于你,但是我个人会在以下场景中使用不同的打包器:

  • Parcel:小型到中型规模的项目(代码行小于 15k)
  • Webpack:大型以及企业级规模的项目;
  • Rollup:用于 NPM 包。

接下来,我们快速看一下 Parcel。

安装

Parcel 的安装非常简单直接。

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

在就绪之后,我们添加一些样式并在index.js中导入styles.scss

styles.scss

复制代码
body {
background: steelblue;
color: white;
}

index.js

复制代码
import './styles.scss';
document.write('hmr + hmr + hmr');

生产环境的构建

我们需要添加一个build脚本到package.json中:

运行我们的构建脚本:

看到 Parcel 给我们带来多大的便利吗?

还可以通过下面的方式指定特定的构建路径:

复制代码
parcel build index.js -d build/output

React

搭建 React 环境非常简单,需要做的就是安装依赖并搭建.babelrc

复制代码
npm install --save react react-dom babel-preset-env babel-preset-react && touch .babelrc

.bablerc的内容如下:

复制代码
{
"presets": ["env", "react"]
}

一切准备就绪,接下来见识一下它的威力,在继续下面的内容之前,请尝试编写我们的初始 react 组件。

Vue

接下来,是一个使用 Vue 的样例。

首先,安装vueparcel-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.jsindex.html文件:

最后,初始化 vue 并编写第一个 vue 组件。


就这样,我们安装了Vue,并且还能支持.vue

TypeScript

这一项非常容易,只需安装 TypeScript 就可以了。

复制代码
npm i --save typescript

创建名为index.ts文件并插入到index.html中。

源码

以上样例的源码都可以通过GitHub 获取:

https://github.com/wesharehoodies/parcel-examples-vue-react-ts

原文地址:

https://medium.freecodecamp.org/all-you-need-to-know-about-parcel-dbe151b70082

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群,加入前端之巅学习群请关注「前端之巅」公众号后回复 “ 加群 ”。投稿请发邮件到 editors@cn.infoq.com,注明 “ 前端之巅投稿 ”。


感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们。

2018-01-14 18:002115

评论

发布
暂无评论
发现更多内容

基于开源IM即时通讯框架MobileIMSDK:RainbowChat v8.4版已发布

JackJiang

即时通讯 即时通讯IM

我不想再传递 nameof 了

newbe36524

C# Docker Kubernetes

更专业、安全、可控!政企都选择WorkPlus私有化部署

WorkPlus

WorkPlus即时通讯集成工作平台,提效企业一体化管控

WorkPlus

炸了!3年图片都没了

艾小仙

拥有了瓴羊Quick BI,企业的数据分析变得更好

巷子

什么是网关型堡垒机?与运维审计堡垒机有什么区别?

行云管家

堡垒机 堡垒机网络安全

完美主义者友好!合合信息旗下扫描全能王“智能擦除”照片中的杂物

合合技术团队

人工智能 图片 文本

飞桨特色产业级模型库助力AI开发与落地更简单

飞桨PaddlePaddle

paddle 开源 模型 飞桨

Maven Shade插件relocation修改类常量的问题

Laughing

Java 后端 Maven-Shade-Plugin RelocationClass

ChatGPT入门案例|商务智能对话客服(二)| 社区征文

TiAmo

openai ChatGPT

有了瓴羊Quick BI,企业再也不必担心可视化分析情况

小偏执o

飞桨框架v2.4 API新升级!全面支持稀疏计算、图学习、语音处理等任务

百度Geek说

API 框架 3D点云 企业号 2 月 PK 榜 Sparse Transformer

QCon演讲实录(下):多云管理关键能力实现与解析-AppManager

阿里云大数据AI技术

大数据 运维 多云服务 多云管理

多款社交黑马海外霸榜,融云全球通信服务护航登顶

融云 RongCloud

连续两年榜上有名!TDengine 荣获墨天轮“2022 年度时序数据库”奖项

TDengine

数据库 tdengine 时序数据库

瓴羊Quick BI可视化功能,满足企业的数据分析需求

对不起该用户已成仙‖

使用了瓴羊Quick BI,数据分析的效率有效提升

夏日星河

GuitarPro2024免费版吉他打谱工具

茶色酒

GuitarPro

EasyRecovery2023新版本有哪些新功能?

茶色酒

EasyRecovery EasyRecovery15 easyrecovery2023

极客时间运维进阶训练营第十四周作业

9527

面试必问:JVM 如何确定死亡对象?

王磊

java面试

MASA Stack 1.0 发布会 —— 社区问题解答

MASA技术团队

.net stack 应用现代化 MASA

使用自定义的初始化方法宏(OC)

刿刀

利用DUCC配置平台实现一个动态化线程池

京东科技开发者

spring 多线程 代码 动态线程池 ducc

CleanMyMacX4.12.5中文版苹果电脑管家

茶色酒

CleanMyMacX4.12.5

国际财务系统基于ShardingSphere的数据分片和一主多从实践

京东科技开发者

数据库 数据分片 ShardingSphere 企业号 2 月 PK 榜 一主多从

可靠、稳定、安全,龙蜥云原生容器镜像正式发布!

OpenAnolis小助手

开源 容器 云原生 镜像 龙蜥社区

电阻为什么都是4.7kΩ、5.1kΩ,而不是整数5kΩ?

元器件秋姐

科普 元器件 元器件知识 电阻 电阻值

黑龙江哈尔滨市等保测评机构有五家啦!名单看这里!

行云管家

等保 机构 等保测评 哈尔滨

大规模即时云渲染技术,追求体验与成本的最佳均衡

阿里云视频云

云计算 云渲染 云庙会

关于Parcel你需要知道的所有内容:超快的Web应用打包器_语言 & 开发_Indrek Lasn_InfoQ精选文章