parcel初体验

最近须要作一个纯静态网站，因工做量比较少，功能又不复杂，上 webpack 以为太麻烦了，加上早就对 parcel 种草，因此此次决定试用一下号称零配置的 parcel 。

上手

根据官网文档很快就安装好了。值得点赞的是，在引入 less 文件的时候，parcel 自动检测到了 less，并自动下载了相关编译插件，稍等片刻便可使用。打包速度挺快，HMR 也是挺好用。

深度使用

路径修改

很快定制需求来了，因为 HTML 文件内的相对路径都自动转换成了 dist 下的绝对路径，而我须要能在不启动服务器的状况下，在本地直接打开 index.html 预览。那么就须要将 HTML 内的资源路径都转换成相对路径。查询文档后发现指定 --public-url 便可。

parcel build src/page/index.html --public-url ./ 
复制代码

postcss 插件引入

因为须要支持响应式，因此进入了 rem 单位，为了省事引入了 postcss-pxtorem 插件，可以自动将 px 转换成 rem。

# postcss.config.js
const pxtorem = require('postcss-pxtorem');

module.exports = {
    plugins: [pxtorem({ rootValue: 50, propList: ['*'] })],
};
复制代码

深坑

HMR less 修改后不自动加载

在特定的某个页面下，我修改了 less 文件，parcel 在编译后，浏览器并无刷新样式。

style appearance 没法加上厂商前缀

正常状况下，appearance: none;会被编译成 -webkit-appearance: none;-moz-appearance: none;appearance: none; ，可是 parcel 并无转换。一开始我觉得是 browserslist 的问题，在查询了 autoprefixer 文档后发现，autoprefixer 没问题。因此问题就出在 parcel 上。引入指定 autoprefixer ，覆盖掉 parcel 的 autoprefixer 问题解决。

# postcss.config.js
const pxtorem = require('postcss-pxtorem');
const autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [autoprefixer, pxtorem({ rootValue: 50, propList: ['*'] })],
};
复制代码

打包目录反人类

第一次把项目打包出来后看了下目录，惊了个呆，竟然全部文件平铺在 dist 目录下。。。一个合理的目录至少要把 css/img/font 等资源分门别类放在对应文件夹下，在深刻了解了下以后，发现竟然不能改，还发现了另一个深坑。

dist 下的文件没法取消 hash

做为演示 demo 页面，我对强缓存没有需求，因此我不须要对个人资源进行 hash 重命名，这样也不够美观。翻了一遍 issue 后发现，因为打包目录的缘由，同名文件可能出如今dist下，因此 hash 文件名策略不能取消。好消息是 parcel 2 会经过插件的方式支持命名策略。github.com/parcel-bund…

总结

parcel 做为一个新前端编译工具，带来了零配置的概念，轻度尝鲜很棒。可是做为生产使用的时候，还有很多 bug 和缺点，目前来说并不推荐做为生产工具使用。