你应该了解的parcel

Question

你应该了解的parcel

muwoo opened this issue 6 years ago · comments

什么是parcel

网上关于parcel的报道很多，其实也是个和webpack类似的资源打包编译工具，官网上对其主要的宣传点还是在打包更快速，零配置，入口支持html,css,js...
当然，听到这里，或许每个人都想去尝鲜。因为我现在项目主要的技术栈是vue，所以我们来基于Vue来试试parcel 到底怎么样。

环境安装

运行以下命令，安装parcel:

npm install -g parcel-bundler

准备ES6+ 环境

按照官方的说法，0配置，理论上我什么都不安装即可以完成项目的构建，于是乎我兴高采烈的创建了一个main.js用来作为我ES6的测试文件：

// main.js
const a = 'hello parcel'
console.log(a)

再建立一个index.html作为其入口文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>parcel</title>
</head>
<body>
</body>
<script src="./main.js"></script>
</html>

当我们愉快的运行parcel index.html的时候报错了：

很显然，说transform-runtime 模块在.babelrc 文件中找不到....oh fuck，行吧，我就依你！

# 安装依赖
npm i babel-plugin-transform-runtime --save-dev

建立.babelrc文件

{ 
  "plugins": [
    "transform-runtime"
  ]
}

再次运行命令，终于编译成功了，产生了两个目录，一个是 .cache 一个是dist目录。.cache存放的是编译缓存文件，可以提高parcel再次打包编译的速度。dist便是我们最终生成的资源文件。

Vue环境

首先是准备我们的Vue包
npm install vue --save
然后改写我们的main.js

import Vue from 'vue/dist/vue.min.js'

new Vue({
  el: '#app',
  data: {
    msg: 'Hello Parcel'
  }
})

至于这里为什么要引入vue.min.js有兴趣的可以参考我的这篇文章 vue 目录介绍
然后是我们的html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>parcel</title>
</head>
<body>
  <div id="app">{{msg}}</div>
</body>
<script src="./main.js"></script>
</html>

访问localhost:12345 一切正常。

单文件组件

由于这里我们没有任何配置，没办法像webpack那样记载vue-loader，好在parcel提供了一个加载Vue文件的插件 parcel-plugin-vue，里面也有具体的demo，这里不再赘述。

使用中的一些问题

在进行parcel生产环境构建的时候，NODE_ENV=production parcel build index.html -d build无意中抛了一个错误:

然后去parcel issues 里面找了好久，终于找到了一些回答：parcel-bundler/parcel#390，大致是说，parcel-bundler 版本如果低于1.3， build 的时候压缩会出现问题，必须带上--no-minify 参数。
不支持tree-shacking，打包体积也是很大的。
Parcel 本身是零配置的，但 HTML、JS 和 CSS 分别是通过 posthtml、babel 和 postcss 处理的，所以我们得分别配 .posthtmlrc、.babelrc 和 .postcssrc
Parcel 还很年轻，所以你可能会碰到一些麻烦的问题，所以切换项目请慎用。