下一代零配置打包工具 Parcel 初體驗

03-02

過於複雜繁瑣的 webpack 配置一直是前端項目里的一個痛點，而新一代的「零配置」打包器 parcel 正在解決這個問題，春節回來之後的這幾天我嘗試把手上的業務遷移到 parcel 構建，下面就是一些踩坑心得。

先說結論：

parcel 極其適合小型單頁 React 頁面的打包構建，真的是完全零配置
對於 vue，目前 parcel-plugin-vue 存在一些坑（詳細請看這個 issue），現在已經修復，但 parcel-plugin-vue 還未更新。
對於大型多頁的項目，parcel 打包構建沒有問題，但目前 parcel 1.6.2版本還不支持 CommonsChunk 和 Tree Shaking，對於 alias 的支持在下個版本才會加入，所以構建出來的 js 體積還比較大。

快速上手

先從一個極簡的 React 應用開始，首先當然是先安裝：

npm i parcel-bundler -g

然後你可以隨便寫一個 React 的 Hello World：

<html><body> <div id="root"></div> <script src="./index.js"></script></body></html>

// index.jsimport React from react;import ReactDOM from react-dom;ReactDOM.render( <h1>Hello, parcel!</h1>, document.getElementById(root));

我們這裡用到了 ES6 語法，以及 JSX，但與 webpack 不同的是，我們不需要額外地配置一堆 loader 和插件，不需要區分開發/生產環境的構建配置。

為了這段 ES6/JSX 的代碼能跑起來，只需要安裝一些 babel 插件就可以了：

npm install babel-preset-envnpm install babel-preset-react

然後寫一個 .babelrc:

{ "presets": ["env", "react"]}

然後，就可以跑起一個自帶 HMR，支持 ES6/JSX 語法等等高階特性的本地開發環境：

parcel index.html

對於常見的圖片、less文件什麼的，parcel 當然是天生支持的，無需任何配置：

// 來一張圖片import yourImage from 123.png;// 來一個 less 文件import index.less;ReactDOM.render( <img src={yourImage} />, document.getElementById(root));

構建也很簡單：

parcel build index.html

使用 Parcel 構建 Vue 項目

與 React 稍有不同的是，我們要額外安裝一個 parcel-plugin-vue 來支持對於 .vue 文件的載入：

npm i parcel-plugin-vue

然後就非常簡單了：

<html><body> <div id="root"></div> <script src="./index.js"></script></body></html>

// index.jsimport Vue from vueimport App from ./index.vuenew Vue({ el: #root, render: h => h(App)})

<style lang="less" scoped> div { font-size: 50px; text-align: center; }</style><template> <div>hello {{text}}!</div></template><script> export default { data() { return { text: parcel } } }</script>

跑起來：

parcel index.html

我們這裡使用了 .vue 文件，裡面包含了 less 方言、es6 語法，而這些都不需要額外的配置。

vue 項目的一些坑

1、報錯 Uncaught TypeError: Cannot read property add of undefined

我們上面的例子使用的是 parcel 1.6.2 以及 parcel-plugin-vue 1.5.0，有可能會遇到這個錯誤，這個錯誤本質上是 parcel-plugin-vue 中錯誤地重寫了 parcel 的一處方法導致的，現在已經得到修復（詳情請看這個issue），不過目前 parcel-plugin-vue 還沒發布修復後的新版本，可能要再等幾天。

2、報錯 Unknown Version 6.2 of samsung

在一些舊項目中可能會遇到，這是由於本地 browserlist 依賴的 caniuse-lite 版本太舊導致的，更新 caniuse-lite 可以解決：

npm i caniuse-lite

生產環境中使用 parcel 的正確姿勢

1、本地開發環境

parcel 打開開發環境其實很簡單：

parcel xxx.html

但在大多數項目中，我們更偏向於使用項目內安裝的 parcel，而不是全局安裝的 parcel，所以我們會寫一個 npm script，然後 npm run dev：

{ "scripts": { "dev": "parcel xxx.html" }}

但項目內有可能會存在多個頁面，為每個頁面都寫一個 npm scripts 會很麻煩，所以我們可以配合 npm scripts 的參數來解決：

{ "scripts": { "dev": "parcel" // 這裡不寫頁面名 }}

然後

npm run dev -- /path/to/xxx.html

注意 -- 和路徑之間有一個空格，這樣 npm 就會把路徑識別為 parcel 的參數。

2、多頁面項目的構建

parcel 目前還不支持多入口，所以只能一頁一頁地構建，我們可以通過 shell 腳本來自動解決。

例如，我們的項目結構是這樣的：

src└── page ├── page1 ├── index.html └── index.js ├── page2 ├── index.html └── index.js ├── page3 ├── index.html └── index.js └── page4 ├── index.html └── index.js

那麼我們可以寫一個 build.sh 作為構建腳本：

# 先清空 distrm -rf distmkdir dist# 對 page 文件夾下的每一個 name 都進行構建cd ./src/pagefor name in $(ls)do echo building $name ... npm run parcel:build -- src/page/$name/index.html -d dist/$name --detailed-reportdone

注意我們這裡使用了 parcel:build 這個命令：

{ "scripts": { "parcel:build": "parcel build" }}

使用 parcel 構建的優劣總結

優點：

零配置真的爽，爽啊爽啊就是爽，用了就回不來了，完全告別幾百行複雜的 webpack 配置。
構建速度比 webpack 快很多，內置了大量 webpack 配起來十分蛋疼的東西（比如 HMR、dev server、各種 loader）。
完全可以應對大型項目的開發及構建。

缺點：

webpack 的一些高階特性還不支持，比如 CommonsChunk、Tree Shaking、多入口文件、自定義構建出的文件名、內聯小尺寸的圖片、內聯css等，所以構建出來的資源體積都比較大。
目前對於大型項目的構建還需要額外寫 shell 腳本（但我真的覺得比寫 webpack 構建簡單太多了）。
還處在快速迭代期，特殊情況下可能會有奇怪的報錯，需要自行 debug 解決。