[聚合文章] 折腾记：Hello Parcel

Parcel 是一个新出的「快速，零配置的 Web 应用程序打包器」，光是零配置这一点，看着就已经比 webpack 好一万倍了——webpack 让我们怀疑，前端是否要衍生出一种副职业：配置工程师。我至今也没有能够掌握「如何优雅的配置 Webpack」，之前本来准备用 poi 来简化 webpack 配置，不过突然想起了这个更高、更快、更强、（更懒）的新道具，于是又折腾了起来。

Parcel 有啥优点

首先，他的优点是零配置，也就是说，你不用自己配置就能支持 JS / CSS / HTML，开箱即用。此外，零配置不代表不能配置，它提供了接口，可以让你进行一些插件的开发，在此基础上做出一些 DIY，零配置的意义其实是 带默认值、开箱即用 的配置，而并非不可配，灵活性差。

其次，速度快，这也是很重要的一个提高，webpack 要打包大型项目不免让人觉得有点慢，而 Parcel 利用多核与缓存（你可以在打包后在目录内看到 .cache ），让打包速度提高了几倍。

Hello World for Vue and Typescript

首先，parcel 的插件列表可以在 相关 issue 中看到，中文也已经有一个 awesome-parcel 了（但不太全，可以去补充一波）

这里我就配了一下 Vue + Typescript，事实上，单用其中的一个确实可以达到开箱即用，但是两个结合的时候还是踩了一些坑。

整个项目可以看： https://github.com/csvwolf/parcel-test

从项目中就可以看出非常的简单，配置以下依赖：

"devDependencies": {
    "parcel-bundler": "^1.2.0",
    "parcel-plugin-typescript": "^0.2.1",
    "parcel-plugin-vue": "^1.0.1",
    "typescript": "^2.6.2",
    "vue": "^2.5.11"
  }

需要注意的是，尽管说好了全局安装 parcel-bundler ，然而在项目里还要在安装一次，而且需要由这个来启动，否则会无法正常运行。

然后配置 tsconfig.json ：

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node"
  }
}

配完官方推荐配置，滚蛋，两个插件安装完就能搞定了。

哈？这么简单

这么看来，似乎并没有什么坑——Emmm，比起 webpack 来，我们在前端有一个常见的功能： alias ，我似乎并没有看到这个功能，可是按照官方的设定，基本上是这么玩的：

官方配置不能满足 -> 插件 -> 插件不能满足 -> 插件暴露配置

那么我应该给 plugin 提 issue 还是 parcel 提 issue 呢……我陷入了沉思。

此外，还有一些微小的（也不怎么小的）bugs 和待改进的功能点，不过 plugin 的作者也在积极修复，态度也非常棒，但是相关 plugin 的用户还不是很多，感觉踩坑的人还是略少，期待 parcel 生态有更好的发展。总的而言，如果目前要把复杂的项目迁移到 parcel，我还不太推荐这么做，不过如果是在现有的项目中使用试试水或者只是单纯的懒得配置，那真是极好的。