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

如果您觉得文章不错,可以通过赞助支持我

标签: 源码, 知识, 代码段

已有 12 条评论

  1. 尤雨溪在微博说这项目代码写的好的时候,就体验了一下,结果官方demo的build流程都报错,不知道这两周开发的怎么样了

  2. taugocauci

    我比较喜欢项目里安装一次后用 npx 执行,不用安装到全局。

  3. llfylwg

    用yarn add --dev parcel-bundler安装,一直安装不上,博主有遇到吗???

    1. 没有 贴出你的报错看看?

      1. llfylwg

        [1/4] Resolving packages...
        [2/4] Fetching packages...
        info fsevents@1.1.3: The platform "win32" is incompatible with this module.
        info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
        [3/4] Linking dependencies...
        warning "parcel-plugin-typescript > @ngtools/webpack@1.9.1" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
        warning " > parcel-plugin-vue@1.4.0" has unmet peer dependency "vue-template-compiler@~2".
        warning "parcel-plugin-vue > vueify-bolt@1.0.2" has unmet peer dependency "vue-template-compiler@~2".
        warning "parcel-plugin-vue > vueify-bolt > vue-loader@13.6.0" has unmet peer dependency "css-loader@*".
        warning "parcel-plugin-vue > vueify-bolt > vue-loader@13.6.0" has unmet peer dependency "vue-template-compiler@^2.0.0".

        1. 这个库 Windows 不支持…………这就尴尬了

          1. llfylwg

            看提示说是32位不兼容,可我windows是64位啊。。。。

        2. llfylwg

          博主帮忙看下吧,一直提示这个,依赖里装不上parcel-bundler,全局已经装上了。

        3. win32 貌似是 Windows API 的缩写……

          1. llfylwg

            那这个缩写够666。
            1、但是npm可以安装上,这有点奇怪了?
            2、不过我如果用npm装上,又提示我说 "parcel-plugin-typescript"没找到,但实际上我用yarn已经装好了。
            3、难道yarn和npm不能混用?

        4. 你把 node_modules 删了之后重新用 npm 装一下试试?

添加新评论