关于 Parcel 你所需要知道的一切：快速的 Web 应用打包工具 🚀
真的吗? 又一个打包/构建工具? 是的 —— 你应该相信, 进步和创新相结合给你带来了 Parcel。
Parcel 有什么特别的，我为什么要关心呢？
当 webpack 以高复杂性的代价给我们带来了很多配置的时候 —— Parcel 却很简单。它号称“零配置"。
揭开上面的疑惑 —— Parcel 有一个开箱即用的开发服务器。它会在你更改文件的时候自动重建你的应用程序，并支持 模块热替换 以实现快速开发。
Parcel 有什么优势？
- 快速打包 —— Parcel 比 Webpack，Rollup 和 Browserify 打包更快。
Parcel benchmarks
需要考虑到的一点是：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 package。现在我们需要初始化一个 Node 项目。
接下来，创建 index.html 和 index.js 文件。
将 index.js 链接到 index.html 中
最后添加 parcel 脚本到 package.json
这就是所有的配置 —— 惊人的节省时间吧！
接下来，启动我们的服务器。
立竿见影！注意构建时间。
15 ms?! 哇，真是太快了！
添加一些 HMR 会怎么样呢?
也感觉非常快。
SCSS
我们所需要的只是 node-sass 包，让我们开始吧！
npm i node-sass && touch styles.scss
接下来，添加一些样式并且将 styles.scss 引入到 index.js
生产环境构建
我们所需要做的就是添加一个 build 脚本到 package.json
运行我们的 build 脚本。
看，Parcel 让我们的生活变得多么轻松？
你也可以像这样指定一个特定的构建路径：
parcel build index.js -d build/output
React
配置 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 的 index 文件并初始化 Vue。
首先创建一个 vue 目录，并创建 index.js 和 app.vue
$ npm i --save vue parcel-plugin-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 中
准备好了就去做吧！
Github源码
如果你认为这篇文章有用，请给我一些鼓励，并让更多的人看到它！
可以关注我的 twitter 了解更多！
感谢阅读！ ❤
掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。
