[[398929]]

先放圖

弱弱的說一句，我真的錯了。不該用parcel~

前幾天，尤大開直播說了造輪子的好處，主要還是鍛煉自己。所以自己還是義無反顧地把這個項目搭建工具慢慢地造起來。

這次升級

這次版本是v1.0.5。

我們來看下這次版本的預裝依賴，我們的項目UI框架預先安裝上了ant-design-vue@2.1.4，默認是按需加載。為什么這次是引入它，而不是element-plus，主要是考慮到parcel2針對babel.config.js這樣的JS文件對組件樣式引入實時檢測不是很好，你必須手動刷新才能獲取最新狀態。另外，parcel2官方推薦使用json格式的，還有element-plus按需引入時用到customStyleName: (name) => {})方法，在json文件沒法實現。所以，最終選用了ant-design-vue@2.1.4。為了搭配按需引入功能，我們引入了babel-plugin-import。

最后，我們這次又引入了最新版本vue@3.0.11，與之相對應@vue/compiler-sfc@3.0.11。

好了，我們來看下我們引入的全部依賴。

"devDependencies": { 
        "@parcel/babel-plugin-transform-runtime": "^2.0.0-nightly.1823", 
        "@parcel/transformer-image": "2.0.0-beta.2", 
        "@parcel/transformer-sass": "2.0.0-beta.2", 
        "@parcel/transformer-vue": "2.0.0-beta.2", 
        "@vue/compiler-sfc": "^3.0.11", 
        "babel-eslint": "^10.1.0", 
        "babel-plugin-import": "^1.13.3", 
        "eslint": "^7.23.0", 
        "eslint-plugin-vue": "^7.8.0", 
        "mockjs": "^1.1.0", 
        "parcel": "^2.0.0-beta.2", 
        "sass": "^1.32.8" 
    }, 
    "dependencies": { 
        "ant-design-vue": "^2.1.4", 
        "axios": "^0.21.1", 
        "vue": "^3.0.11", 
        "vue-router": "4", 
        "vuex": "^4.0.0" 
    } 

同樣，為parcel-vue-app而生的腳手架parcel-vue-cli這次也進行了重大更新，這次版本更新到1.0.9。

這次，做出的更新主要是拉取倉庫后，自動對遠程倉庫進行重置。這樣，你創建項目之后，可以自定義自己的倉庫地址。

實戰

搭建parcel-vue-app

安裝

npm install parcel-vue-cli -g 

查看版本

parcel-vue-cli -v 

初始化

parcel-vue-cli init <projectName> 

啟動項目

安裝依賴

npm install 

啟動

npm run serve 

打包

npm run build 

倉庫地址

parcel-vue-cli：

https://github.com/maomincoding/parcel-vue-cli

parcel-vue-app：

https://github.com/maomincoding/parcel-vue-app

本文轉載自微信公眾號「前端歷劫之路」，可以通過以下二維碼關注。轉載本文請聯系前端歷劫之路公眾號。