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