[翻译]关于 Parcel 你所需要知道的一切：时下火爆的快速 Web 应用打包器
这是一次试翻，之后会每两周翻译一篇文章（练习英语阅读）。
原文：https://medium.freecodecamp.org/all-you-need-to-know-about-parcel-dbe151b70082
真的吗？又是一个打包器或者说构建工具？完全正确，进化和创新的结合为你带来了 Parcel。
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/outputReact
设置 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：
很棒！
植入部分
如果您觉得文章不错，可以通过赞助支持我。
如果您不希望打赏，也可以通过关闭广告屏蔽插件的形式帮助网站运作。
如果你的源文件css，js都分别放在一个文件夹下，打包出来的是啥样子，感觉乱了
不需要放在同一文件夹下的
我试过不放在同一文件夹下，打包出来乱了
你使用的是？我看了一下 Vue / TS / Angular 的 Demo 都是不同目录的
在windows平台下发现一个神奇的bug。
用bash on windows运行npm start，成功打包了，也没有报错，但是访问localhost:1234就是访问不了。。。
然后切回powershell就一切正常。
感谢分享！已推荐到《开发者头条》：https://toutiao.io/posts/c9x0vq 欢迎点赞支持！
欢迎订阅《前端与Node.js》https://toutiao.io/subjects/7076
parcel抽象的那个Assets类也很有意思噢，差不多贯穿了整个工具的设计思路。
感觉这种不需要额外教程
当时配置 Vue + TS + 其他设置还是有挺多问题的，而且这个基本上不属于教程类，而是属于科普推广型