[聚合文章] 关于 Parcel 你所需要知道的一切：时下火爆的快速 Web 应用打包器

这是一次试翻，之后会每两周翻译一篇文章（练习英语阅读）。

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

真的吗？又是一个打包器或者说构建工具？完全正确，进化和创新的结合为你带来了 [Parcel]。( https://parceljs.org/)

Parcel 有什么特别之处以及为什么我要关心呢？

虽然 Webpack 用复杂性的成本带来了许多的可配置型，相对的，Parcel 带来的是简单性。Parcel 本身把自己称为「零配置」。

上述的详解——Parcel 提供了一个开箱即用的开发服务器。开发服务器将在你更改文件时自动重建你的应用，并支持热更新来实现快速开发。

Parcel 到底哪里好？

• 快速的打包时间——Parcel 比 Webpack、Rollup 和 Browserify 都要快。

Parcel 跑分

不过有一点需要考虑：Webpack 依旧是极好的，有时候它打包的更快。

图片来源

• Parcel 对于 JS / CSS/ HTML 和文件资源有有开箱即用的支持——不需要任何插件，更加便于用户使用。
• 零配置需要。开箱即用的代码拆分，热模块重载，CSS 预处理器，开发服务器，缓存以及更多惊喜！
• 更友好的错误日志。

Parcel 的错误处理

好了好了我知道了，那么我什么时候用 Parcel / Webpack 或者 Rollup 呢？

这完全取决于你！但是我个人会在以下情况下使用每一种打包器：

• Parcel - 中小型项目（小于 1.5 万行代码）
• Webpack - 大型以及企业级规模的项目
• Rollup - 开发 NPM 包时

让我们试一把 Parcel 吧！

安装十分简单

npm install parcel-bundler --save-dev

我们把 parcel-bundler 这个 npm 包安装在本地。现在我们需要初始化一个 Node 项目。

接下来，创建 index.html 与 index.js 文件：

开始关联起我们的 index.html 和 index.js ：

最后把 parcel 命令添加进我们的 package.json ：

这是所有需要配置的项——节约时间的大神器！

接下来，启动我们的服务器。

太棒了！注意构建时间。

15 毫秒？哇，这实在是太快啦！

那么，HMR（热重载）工作的如何？

感觉上去也很快呢。

SCSS

我们所需要的全部就是一个 node-sass 包，我们很简单就能开工。

npm i node-sass && touch styles.scss

接下来，加上一些样式，在 index.js 中引入 styles.scss 。

生产环境构建

我们要做的全部就是在我们的 package.json 加上一个 build 命令：

跑个构建命令：

看看 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

好啦好啦，接下来上重酬戏！在滚动到下面的页面之前，尝试着自己写写我们的初始化 React 组件。

Vue

按照大家的要求，接下来奉上 Vue 的例子。

从安装 vue 和 parcel-plugin-vue 开始——后者是为了提供 .vue 的组件支持。

$ npm i --save vue parcel-plugin-vue

我们需要添加我们的根元素，引入 Vue 主页文件和初始化的 Vue 组件。

先从创建一个 Vue 的文件夹开始，同样，创建一个 index.js 和 app.vue 吧。

$ mkdir vue && cd vue && touch index.js app.vue

现在，关联起我们的 index.js 和 index.html ：

最后，初始化 Vue，写完我们的第一个 Vue 组件。

瞧！我们已经给 Vue 加上了 .vue 的支持。

TypeScript

这真是太简单了。只要安装上 TypeScript 我们就能跑起来。

npm i --save typescript

GitHub 源代码