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

時間 2019-11-17

標籤 parcel vue 配置前端構建 iview 實踐简体版

原文原文鏈接

前言

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

本來寄指望於webpack可以一統天下，但伴隨着webpack愈加複雜臃腫，我對於它的發展實在沒有太多的信心，並不是功能越強大越完整就是最合理，往往看着vue-cli的webpack官方模板都包含了七八個配置文件，每一個文件內各類形形色色的邏輯配置，甚至超過了業務代碼的複雜度，那麼維護配置自己，就已然是一件工程量巨大的工做，難道將來還須要再出另一門語言來單獨管理配置嗎？css

前端零配置的需求愈來愈高，parcel爲前端構建帶來了革命性的變化，很慶幸對於Parcel的發現，由於它將我從前端繁雜的配置中解放出來，而我也但願本文可以爲和我有一樣煩惱和困惑的讀者們，獲得答案html

思路

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

index.html

src/

package.json

是的，沒錯，幾乎不可能再簡化了，也不能再增長了，以上就是一個前端Vue通用工程的所有，考慮到現實工程還須要一些兼容和拓展，咱們還須要如下部分功能vue

.babelrc（廢棄）

postcss.config.js（廢棄）

其中，.babelrc實現編碼轉換兼容瀏覽器，postcss.config.js實現CSS編碼轉換兼容瀏覽器，我真的很擔憂我繼續再寫出還有其他不可或缺的部分，可是幸運的是，沒有了，真的沒有了，以上就是一個最最最精簡且可拓展的Vue組件化前端工程的組成部分* （事實證實仍是能夠再簡化的，parcel1.7.0版本開始原生支持VUE構建，不須要任何插件中轉處理了，該步驟廢棄）java

實踐

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

可是如今，什麼都不須要了，由於parcel已經完成了全部的工做，全部在index.html中的依賴都會被全自動解析和處理，由於這本應該就是【程序】的意義，釋放人類重複的邏輯工做webpack

咱們惟一須要作的就是在packge.json中引入parcel，不過遺憾的是，parcel尚未正式完成對vue的支持工做，不過還好已經有第三方的轉換插件推出，並且parcel的插件機制極爲優雅，咱們只須要進一步引入parcel-plugin-vue（廢棄，再也不須要parcel-plugin-vue）ios

一、引入構建依賴

解釋一下如下依賴：git

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"
  }
複製代碼

二、在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官網（這個官網有本文中提到的技術方案構建）

三、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(幾十秒至幾分鐘)實在快太多了

感謝你的閱讀，但願本文可以給你帶來幫助：）

做者：CheneyXu

Github：parcel-vue

關於：Parcel-VUE官網

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。