真的？ 还有另一个打包器/构建工具？ 是的 – 当然，进化和创新结合给你带来了 Parcel。

Parcel 有什么特别之处，我为什么要关注呢？

虽然 webpack 带来了许多可配置性，同事也造就了它的复杂性。 而 Parcel 带来简单性。 官方号称 Parcel 为 “零配置” ，开箱即用。

正如上面所说的 – Parcel 内置了一个开箱即用的开发服务器。 开发服务器将在你更改文件时自动重新构建你的应用程序，并支持 模块热替换 以实现快速开发。

Parcel 有什么好处？

• 快速打包 – Parcel 比 Webpack，Rollup 和 Browserify 更快。
  

  Parcel 的基准测试

  需要注意的是：Webpack仍然很棒，有时可能会更快

  

  查看来源

• Parcel 支持 JS、CSS、HTML、资源文件等等 – 无需插件 – 更加便于用户使用。

• 零配置。开箱即用的代码拆分，模块热替换，CSS 预处理器，开发服务器，缓存等等；
• 更加友好的错误日志。
  
  
  Parcel 的错误处理

你说的都对 – 我应该什么时候使用 Parcel ， Webpack 或 Rollup 呢？

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

• Parcel：中小型项目（代码行小于 15k）
• 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 中：

这就是所有配置 – 超乎想象地节省时间！

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

像使用了魔法一样的工作！注意构建时间。

15ms ？！ 哇，真是太快了！

如何 HMR (模块热替换)？

也感觉非常快。

SCSS

我们需要的是node-sass 包，剩下的工作就非常简单了！

npm i node-sass && touch styles.scss

接下来，添加一些样式，并将 styles.scss 导入到 index.js 中：

生产环境构建

我们需要做的只是添加一个构建脚本到我们的 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

一切准备就绪，接下来见识一下它的威力！在阅读下面内容之前，请尝试自己编写我们的初始 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

创建一个名为 index.ts 的文件并将其插入到 index.html 中：

转译

Parcel 还内置支持很多转译工具，如 Babel，PostCSS，PostHTML。具体内容可以查看官方文档

一切就是这么简单。

Github 源码

文章中用到的例子源码可以从这里下载：https://github.com/wesharehoodies/parcel-examples-vue-react-ts

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