写点什么

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

评论

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

HTTP请求首部字段

穿过生命散发芬芳

HTTP 12月月更

银行如何快速落地营销数字化?

中关村科金

人工智能 大数据 AI 数字化转型 数字化

优化器核心技术—Join Reorder

KaiwuDB

一文告诉你如何选择低代码供应商?

YonBuilder低代码开发平台

超详细图文保姆级教程:App开发新手入门(四)

YonBuilder低代码开发平台

企业想要智慧化办公,首选华为云桌面Workspace!

科技怪授

Web入门开发【四】

小院里的霍大侠

Web 编程开发 初学者 入门实战

启科QuSaaS真随机数解决方案与Amazon Braket结合实践

启科量子开发者官方号

人工智能 量子计算 随机数

无代码优缺点及发展前景

间隔

内存多维数据分析引擎

元年技术洞察

大数据 数据中台 数字化转型 多维数据库

希捷发布2023年数据市场趋势预测,指引企业数据决策

Geek_2d6073

AI 2022:浪潮奔涌,百舸争流

Baihai IDP

人工智能 AI 年终总结 AI 2022

华为云桌面,助你畅享高清视觉体验!

科技怪授

数据库原理及MySQL应用 | 约束

TiAmo

主键约束 数据库· 12月月更

如何使用YonBuilder进行报表分析?

YonBuilder低代码开发平台

YonBuilder应用构建教程之移动端基础配置

YonBuilder低代码开发平台

华为云桌面,如何让云上办公变得高效、安全?

i生活i科技

数据可视化图表系列解析——饼图

Data 探险实验室

数据分析 可视化 数据可视化 可视化数据 可视化工具

spaa 22

黄敏

YonBuilder移动开发平台 AVM框架 封装身份证号码虚拟输入键盘组件

YonBuilder低代码开发平台

统信软件高级工程师:关于云原生技术在容器方面的应用介绍 | 龙蜥技术

OpenAnolis小助手

云原生 容器技术 龙蜥大讲堂 统信软件 开源领域

【IntelliJ IDEA】连接https报错问题: E230001: Server SSL certificate verification failed:

No8g攻城狮

svn IDEA

YonBuilder移动开发 AVM框架 封装虚拟数字键盘组件

YonBuilder低代码开发平台

【架构设计】你的类足够“专一”吗

JAVA旭阳

Java 架构

云原生媒体基础设施为华为云桌面护航

科技怪授

一文读懂什么是低代码开发?

YonBuilder低代码开发平台

疫情放开,户外全彩LED屏发展趋势

Dylan

LED display LED显示屏 户外LED显示屏

手把手教你玩转 Excel 数据透视表

葡萄城技术团队

数据分析 Excel 数据可视化 数据透视表 可视化数据

【web 开发基础】PHP 中的预定义数组详解续集 (48)

迷彩

post GET 文件上传 PHP基础 预定义数组

2022-12-25:etcd可以完全替代zookeeper,原因是k8s用的etcd,不用担心不成熟。请问etcd部署在k3s中,yaml如何写?

福大大架构师每日一题

云原生 k8s etcd k3s 福大大

超详细图文保姆级教程:App开发新手入门(三)

YonBuilder低代码开发平台

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