阅读 2068

折腾记:Hello Parcel

原文链接: codesky.me

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,事实上,单用其中的一个确实可以达到开箱即用,但是两个结合的时候还是踩了一些坑。

整个项目可以看:github.com/csvwolf/par…

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

  "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,我还不太推荐这么做,不过如果是在现有的项目中使用试试水或者只是单纯的懒得配置,那真是极好的。

文章分类
前端
文章标签