详解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

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了20亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用

版权声明

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

您的用户遇到BUG了吗?

体验Demo 免费使用