技術標籤：VueYarnnodejsvue.jsnode.js前端

簡介

我是一個後端老炮，在做工作流服務時，深感動態表單的重要性。所以，慢慢摸索和學習，結合自己的需求，搭建了本套動態表單系統。

• 本系統是基於 lerna 和 yarn workspaces 構建的， monorepo 方式管理程式碼的專案（很喜歡這種方式，和 Maven 的模組化工程一樣，最主要是不用每個專案一堆 node_modules）
• 基於 Vue 2.0 和 Vuetify 2.3.XX 構建。沒有使用 Vue3，主要是 Vuetify 3 還在開發中。
• 共性元件採用 rollup 進行編譯，並且做了已有認知範圍內，能夠做到的所有效能優化處理
• example 模組，基於 vue webpack 方式，對工程打包進行了深入優化。
• 專案中會有很多元件，原本是想把以往工作中涉及的通用性的東西，逐步構建出一個元件庫（這個動態表單系統本身也是一個元件）。研究過一下規範化的元件庫，感覺以本人現在水平做不到，因此才採用了 monorepo 方式。

本專案是後端老炮擼的前端，廣度和深度肯定不如純前端，不喜勿噴，也請多多包涵以及多多交流，互相促進互相成長。

[一]、開發環境配置（Windows）

參考我的文章：Vue開發環境npm和Yarn的環境變數配置

[二]、全域性安裝

如果要正確執行本系統，需要提前安裝一些全域性工具，以便一些命令可以正常執行。

請首先確保上面的環境變數配置正確。

// 請提前全域性安裝一下元件
npm install -g yarn
yarn global add lerna @vue/cli

[三]、工程中各個包用途說明

[四]、常用命令

• 指定包，在某個包下執行 yarn 命令

yarn ws:**

// 例如：
// 新增包（從npm中新增）
yarn ws:example add lodash -D

// 刪除包
yarn ws:example remove lodash

// 執行example
yarn ws:example serve

• 新增本工程中的元件作為依賴包（尚未上傳至 npm）

// 將工程中的h-button 新增至example中
// 注意：不支援批量新增多個，要一個一個加
lerna add @hecate/h-button --scope @hecate/example

// 刪除本工程中的元件，使用yarn命令即可
yarn ws:example remove @hecate/h-button

• 在根目錄新增依賴包

// -W 意思是指工作區，想要操作工程級的包，這個引數不能缺
// -D 指定devDependencies的意思
// 新增元件
yarn add lodash -D -W

// 刪除元件
yarn add lodash -W

• 升級依賴包

yarn upgrade-interactive --latest

// 升級全域性依賴包
yarn global upgrade-interactive --latest

• 編譯所有元件

lerna run lib

• 清空元件 dist

lerna run clean

• 清除元件中的 node_modules

lerna clean

• 讓各個元件中重新關聯依賴包

lerna bootstrap 或 yarn install

• 提交程式碼

yarn push

[五]、問題解決

問題一：升級依賴包時出錯

使用yarn upgrade-interactive --latest命令升級依賴包的時候，特別是@hecate/form-service 中，有依賴包可以升級時（目測是由於使用了 Nuxt），經常會出現下面的錯誤。

Invariant Violation: expected workspace package to exist for "autoprefixer"
    at invariant (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:2314:15)
    at _loop2 (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:94537:9)
    at PackageHoister.init (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:94596:19)
    at PackageLinker.getFlatHoistedTree (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:48744:20)
    at PackageLinker.<anonymous> (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:48755:27)
    at Generator.next (<anonymous>)
    at step (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:310:30)
    at D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:328:14
    at new Promise (<anonymous>)
    at new F (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:5301:28)

這個問題是 yarn 本身的 Bug，雖然 yarn 已經升級到了 1.22.10，但是一會好一會不好的。

（1）解決辦法一

在工程中將 yarn 的版本，降到 1.19.XX。這種方法，只對本工程有效，這樣其它工程仍舊可以使用最新版的 yarn，避免了全域性安裝低版本 yarn 的問題

yarn policies set-version 1.19.XX

// .yarn 目錄生成後，執行
yarn install

這個命令會在工程中生成一個.yarn 目錄以及一個.yarnrc 檔案，並在其中指定 yarn 版本。

（2）解決辦法二

這種辦法土一點，但是可以不用去理會 yarn 的不管問題。

// 1、先查詢看看那些包可以升級
yarn upgrade-interactive --latest

// 2、到指定的包的package.json中，手工修改版本號

// 3、清除元件包的依賴
lerna clean

// 4、重新關聯依賴
lerna bootstrap

或

yarn install

問題二：執行命令是出現禁止指令碼執行的錯誤

解決方法：開啟 PowerShell（在小娜裡搜就行），輸入：

set-executionpolicy remotesigned

之後選擇 Y，問題就解決了。

[六]、依賴說明

以下依賴包暫時不要升級

原始碼

我的Gitee地址