HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

关于 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:002139

评论

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

GaussDB(DWS)网络调度与隔离管控能力

华为云开发者联盟

数据库 大数据 华为云 华为云开发者联盟 企业号 4 月 PK 榜

景顺长城基于 Apache APISIX 在金融云原生的生产实践

API7.ai 技术团队

api 网关 APISIX 金融业务

学了这么久的高并发编程,连Java中的并发原子类都不知道?

华为云开发者联盟

Java 开发 华为云 华为云开发者联盟 企业号 4 月 PK 榜

上网买个东西,居然需要那么多业务系统支撑!

产品海豚湾

SaaS 电商 供应链 电商平台 wms

百度研发效能从度量到数字化蜕变之路

百度Geek说

百度 研发效能 企业号 4 月 PK 榜 效能数字化

Bigasoft Video Downloader Pro :视频网站下载和转换视频器

Rose

World Clock Deluxe for Mac(世界时钟豪华版)

Rose

软件测试/测试开发丨录制你的第一个web 自动化测试用例

测试人

软件测试 自动化测试 测试开发 Web自动化测试

经验分享|如何用ChatGPT开发一个安卓应用

Onegun

人工智能 移动开发 ChatGPT

sync.WaitGroup:掌握并发编程中的重要工具

Jack

数据库原理及MySQL应用 | 事件

TiAmo

MySQL 数据库 事件

精彩回顾 | 2023工赋Meetup—上海站

工赋开发者社区

IT采购,不再默默扛下“背刺”

脑极体

AI ChatGPT

以技术赋能智慧酒店,思岚科技亮相上海酒店展

科技热闻

一文读懂华为云云原生产品及开源实践

华为云开发者联盟

开源 云原生 华为云 华为云开发者联盟 企业号 4 月 PK 榜

手把手带你通过API创建一个loT边缘应用

华为云开发者联盟

IoT 边缘计算 华为云 华为云开发者联盟 企业号 4 月 PK 榜

互联网工程师最新Java面试题及答案汇总( 2023最新版,持续更新)

采菊东篱下

Java 编程

Visual Studio Code for Mac(好用的微软代码编辑器)中文版

Rose

PCB拼板,不得不注意的10个问题!

华秋PCB

电路 PCB PCB设计 拼版 邮票孔

WebAssembly 助力云原生:APISIX 如何借助 Wasm 插件实现扩展功能?

API7.ai 技术团队

api 网关 APISIX Wasm

昇思MindSpore:人工智能的创新之源

Geek_2d6073

对谈阿里云祝顺民:经济复苏,云网络如何加速企业效率提升?

云布道师

云网络

提高API采用率的关键:快速创建有效的API监控任务

云智慧AIOps社区

API api 网关 监控宝 API Gateway 监控产品

互联网出海风大雨大,融云助力 App 守护用户「被遗忘权」

融云 RongCloud

互联网 安全 融云 泛娱乐

AutoCAD(CAD2024)中文特别版Mac/win

Rose

CAD绘图 cad2024激活版

为什么ChatGPT不是中国搞出来的?

慕枫技术笔记

人工智能 后端 4月月更

毕业设计 - 电商秒杀系统

架构实战营 「架构实战营」

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