[[398929]]

先放圖

弱弱的說(shuō)一句，我真的錯(cuò)了。不該用parcel~

前幾天，尤大開(kāi)直播說(shuō)了造輪子的好處，主要還是鍛煉自己。所以自己還是義無(wú)反顧地把這個(gè)項(xiàng)目搭建工具慢慢地造起來(lái)。

這次升級(jí)

這次版本是v1.0.5。

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

最后，我們這次又引入了最新版本vue@3.0.11，與之相對(duì)應(yīng)@vue/compiler-sfc@3.0.11。

好了，我們來(lái)看下我們引入的全部依賴。

"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這次也進(jìn)行了重大更新，這次版本更新到1.0.9。

這次，做出的更新主要是拉取倉(cāng)庫(kù)后，自動(dòng)對(duì)遠(yuǎn)程倉(cāng)庫(kù)進(jìn)行重置。這樣，你創(chuàng)建項(xiàng)目之后，可以自定義自己的倉(cāng)庫(kù)地址。

實(shí)戰(zhàn)

搭建parcel-vue-app

安裝

npm install parcel-vue-cli -g 

查看版本

parcel-vue-cli -v 

初始化

parcel-vue-cli init <projectName> 

啟動(dòng)項(xiàng)目

安裝依賴

npm install 

啟動(dòng)

npm run serve 

打包

npm run build 

倉(cāng)庫(kù)地址

parcel-vue-cli：

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

parcel-vue-app：

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

本文轉(zhuǎn)載自微信公眾號(hào)「前端歷劫之路」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端歷劫之路公眾號(hào)。