详解Parcel：快速，零配置web应用打包工具

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

• 原文: Everything You Need To Know About Parcel: The Blazing Fast Web App Bundler 🚀
• 译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原做者全部，翻译仅用于学习。

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.html 和 index.js 文件。

把 index.html 和 index.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

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

$ npm i --save vue parcel-plugin-vue
复制代码

须要添加咱们的根元素，导入vue的index文件并初始化Vue。

首先生成个vue目录，而后建立index.js和app.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支持用户行为回溯