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 和缺點，目前來講並不推薦作為生產工具使用。