Vue UI庫之基本構建配置說明

2021-09-24 00:15:06 字數 2025 閱讀 4198

目前正在著手構建的vue ui庫vui目前已完成主要的webpack構建過程,故以此文章說明構建過程中關鍵點。

還是依據package.json的配置來逐一說明,package.json的主要配置如下:

,"githooks":,

"lint-staged":,

"config":}

}

上面主要是package.json主要的配置分別是files、scripts、提交規範,實際上核心是scripts的配置。

files

定義npm包發布後的包含的檔案和目錄,vui專案之前測試npm發布指令碼,發布過乙個demo版本vui-lib v0.1.3。

通過package.json中的配置,發現除了包含dist、src、packages還包含其他必要的檔案,具體如下:

提交規範

實際上這裡在vue ui庫之初始構建專案結構文章中就提交了這邊定義的git提交規範,而且這裡在scripts也會有專門的命令來生成相關的changelog.md檔案。

scripts命令詳解

scripts定義的命令有10條,具體如下:

從上面3個子命令的處理,可以看出deploy-build命令實際上就是對example目錄下官網專案進行打包編譯並推送到遠端gh-pages分支。

lint命令

"lint"

:"eslint --ext .js,.vue src"

執行eslint命令,檢查src下js檔案和vue檔案**格式問題。

clean命令

"clean"

:"rimraf dist"

刪除ui庫的輸出目錄,避免檔案遺留情況。

changelog命令

"changelog"

:"conventional-changelog -p angular -r 2 -i changelog.md -s"

該命令是依據git提交資訊來生成changelog.md檔案。

build:entry命令

"build:entry"

:"node build/build-entry.js"

該命令是用於生成src/index.js,即入口檔案,入口檔案實際上是針對元件的批量註冊功能。

build:style命令

"build:style"

:"gulp build --gulpfile build/build-style.js"

build命令

"build"

:"npm run clean && npm run build:entry && npm run lint && npm run build:style && node build/build.js"

由一系列子命令組成:

該命令作用是打包編譯ui庫用於生產環境,從上面的一系列子命令中可知是執行build/build.js,該檔案有詳細的注釋。

pub命令

"pub"

:"sh build/release.sh"

該命令用於npm包的發布,該命令實際上是執行shell指令碼來處理這個過程。

commit命令

"commit"

:"git-cz"

該命令提供互動式git提交規範的確認,具體可看vue ui庫之初始構建專案結構這篇文章。

vui庫是個人的vue ui庫,除了最基本的元件外之後還會增加常見的業務元件,會持續構建該ui庫,同時該ui庫會有詳細的注釋,如果你想學習如何構建ui庫,歡迎star和fork。

nginx基本配置說明

頂層配置資訊管理伺服器級別行為 worker processes 1 event指令與事件模型有關,配置處理連線有關資訊 events http指令處理http請求 分為兩種匹配模式,普通字串匹配,正則匹配 無開頭引導字元或以 開頭表示普通字串匹配 以 或 開頭表示正則匹配,表示不區分大小寫 多個l...

webpack基本配置附帶說明

1 let path require path 系統自帶模組 2 let htmlwebpackplugin require html webpack plugin 3const openbrowserwebpackplugin require open browser webpack plugin...

DirectShow之配置說明

這兩天一直在查directshow方面的資料,收穫很多,這裡將directshow的配置簡要在這裡提一下。解壓縮後開始安裝install.exe,系統會自動安裝在c dxsdk資料夾中,在vc6.0中依次選擇 tools options directories,你會發現這裡面多了乙個c dxsdk ...