Parcel-VUE零配置前端構建（iview實踐）

cheneyweb發表於2019-03-04
Vue前端View

前言

在我的上一篇文章才剛剛闡述了vue-cli的webpack模板工程構建優化方案和步驟，以及在結尾時對未來前端構建的思考和展望。結果這個時候 【Parcel】 就橫空出世了，目前關於Parcel的文件很少，而且Parcel本身也處於高速迭代發展的實驗階段，但它的確是前端構建的最終解決方案，也許這一次，真的沒有之一了

原本寄期望於webpack能夠一統天下，但伴隨著webpack越發複雜臃腫，我對於它的發展實在沒有太多的信心，並非功能越強大越完整就是最合理，每每看著vue-cli的webpack官方模板都包含了七八個配置檔案，每個檔案內各種形形色色的邏輯配置，甚至超過了業務程式碼的複雜度，那麼維護配置本身，就已然是一件工程量巨大的工作，難道未來還需要再出另外一門語言來單獨管理配置嗎？

前端零配置的需求越來越高，parcel為前端構建帶來了革命性的變化，很慶幸對於Parcel的發現，因為它將我從前端繁雜的配置中解放出來，而我也希望本文能夠為和我有同樣煩惱和困惑的讀者們，得到答案

思路

對於Parcel的實踐，本文基於Vue以及其衍生出來的元件框架iView 一個最簡單，通用，可擴充的Vue前端工程應該由以下部分組成，其中，index.html是單頁檔案，src/是Vue元件原始碼，package.json是依賴包管理

  1. index.html
  2. src/
  3. package.json

是的，沒錯，幾乎不可能再簡化了，也不能再增加了，以上就是一個前端Vue通用工程的全部，考慮到現實工程還需要一些相容和擴充，我們還需要以下部分功能

  1. .babelrc（廢棄）
  2. postcss.config.js（廢棄）

其中，.babelrc實現編碼轉換相容瀏覽器，postcss.config.js實現CSS編碼轉換相容瀏覽器，我真的很擔心我繼續再寫出還有其餘不可或缺的部分，但是幸運的是，沒有了，真的沒有了，以上就是一個最最最精簡且可擴充的Vue元件化前端工程的組成部分* （事實證明還是可以再簡化的，parcel1.7.0版本開始原生支援VUE構建，不需要任何外掛中轉處理了，該步驟廢棄）

實踐

傳統而言，為了讓以上5個組成部分的融合，我們需要使用webpack進行大量，不，海量的複雜配置，讓其能夠正常工作，這也就是vue-cli的webpack開發模板中build資料夾，config資料夾，以及其package.json中一長串的依賴包的由來

但是現在，什麼都不需要了，因為parcel已經完成了所有的工作， 所有在index.html中的依賴都會被全自動解析和處理，因為這本應該就是【程式】的意義，釋放人類重複的邏輯工作

我們唯一需要做的就是在packge.json中引入parcel，不過遺憾的是，parcel還沒有正式完成對vue的支援工作，不過還好已經有第三方的轉換外掛推出，而且parcel的外掛機制極為優雅，我們只需要進一步引入parcel-plugin-vue（廢棄，不再需要parcel-plugin-vue）

1、引入構建依賴

解釋一下以下依賴：

1.1 超高人氣的axios是前端AJAX網路請求的不二之選

1.2 vue與vue-router是Vue專案工程的必備

1.3 而本文以iview元件框架為裡講解，所以引入iview

1.4 parcel-bundler和parcel-plugin-vue是構建基石（不再需要parcel-plugin-vue）

1.5 less用於支援CSS編碼轉換（廢棄）

1.6 babel-preset-env和babel-plugin-transform-object-rest-spread用於ES6編碼轉換相容（廢棄）

真的不能再少了，如果能，請聯絡我，不勝感激：）

  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html --public-url /"
  },
  "dependencies": {
    "vue-router": "^3.0.1",
    "axios": "^0.18.0"
  },
  "devDependencies": {
    "babel-preset-env": "^1.6.1",（廢棄）
    "babel-plugin-transform-object-rest-spread": "^6.26.0",（廢棄）
    "less": "^2.7.3",（廢棄）
    "parcel-bundler": "^1.7.0",
    "parcel-plugin-vue": "^1.5.0",（廢棄）
    "vue": "^2.5.16",
    "iview": "^2.11.0"
  }
複製程式碼

2、在index.html中引入js依賴

這裡需要注意的是，./src/main.js必須在<div id="app"></div>之後引入

<body>
    <div id="app"></div>
    <script src="./src/main.js"></script>
</body>
複製程式碼

降龍十八掌，打完收工，是的，沒錯，結束了：） 就是這麼簡單，一個最精簡可擴充的Vue工程的構建準備就是如此了，也許很多人看到這裡會疑問我沒有給出src/的原始碼呀，這一部分要怎麼寫呢？

不用著急，src/ 的原始碼部分不屬於本文討論的構建部分了，因為這是Vue的元件開發程式碼，所有Vue專案工程都是一樣的。而且既然世界上有github，那麼我們理應利用好它，本文中提到的parcel-vue專案工程模板，我已經上傳github開源：parcel-vue，並且為其製作了一個簡單的官網Parcel-VUE官網（這個官網有本文中提到的技術方案構建）

3、Parcel-VUE模板專案預覽

我個人非常追求極簡和擴充，以下是Parcel-VUE的模板工程目錄結構

├── dist                構建結果
│   └── index.html
├── index.html          首頁檔案
├── node_modules
├── package.json
├── postcss.config.js   CSS配置
├── src                 開發原始碼
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   └── router
└── static              靜態檔案
    ├── css
    ├── img
    └── js
複製程式碼

同時我製作了一個cli工具用於初始化Parcel-VUE開發模板

npm install xserver-cli -g
x-cli parcel-vue myproject
cd myproject
複製程式碼

開發除錯

npm run dev
複製程式碼

正式構建

npm run build
複製程式碼

後記

官網預覽如下，基於iview開發，parcel構建，首次構建時間只要 5秒 左右，快取以後構建在 1秒 左右，熱部署開發除錯響應一般 1ms—10ms 左右，相比webpack(幾十秒至幾分鐘)實在快太多了

Parcel-VUE官網.png

感謝你的閱讀，希望本文能夠給你帶來幫助：）

作者：CheneyXu

Github：parcel-vue

關於：Parcel-VUE官網

相關文章