lerna monorepo 使用 ant design pro 與配套庫 踩坑
阿新 • • 發佈:2021-12-07
首先安裝 lerna ,這個自己百度 …… 安裝完命令列會說 lerna 找不到 ,這個也百度 …… (大概就是 npm 還是 yarn 裡面 的 bin 裡面 有 lerna 執行程式 ,把他加到 環境變數裡面 就能用了 )
lerna 有兩種用法 ,monorepo 和 另外 一個(名字忘記 了) ,這裡用 monorepo用法
先建立 資料夾
$ mkdir lerna-study-monorepo && cd lerna-study-monorepo
lerna init 初始化
$ lerna init
# ifnk @ ifnk in ~/proj/lerna-study-monorepo on git:master x [11:19:34]$ exa -T -L 2 . ├── lerna.json ├── package.json └── packages
編輯下leran.json
{ "packages": [ "packages/*" ], "version": "0.0.0", "npmClient": "tyarn" // 加上這行,指定 npm 客戶端,這裡選擇 tyarn ,速度快一點 }
cd 到 packages 裡面 去 ,這裡面 是存 要 用的庫的
先建一個 ant-pro-design 的專案 ,具體步驟百度
在建一個 dumi 基礎元件庫 ,具體步驟百度
這個時候專案結構是這樣
#ifnk @ ifnk in ~/proj/lerna-study-monorepo on git:master x [11:27:55] $ exa -T -L 2 . ├── lerna.json ├── package.json └── packages ├── lerna-ant-design-pro # antpro 主專案 └── lerna-dumi-component-lib # dumi 元件庫(基礎庫)
把兩個專案對應的 package.json 改下 名字
$ vim packages/lerna-ant-design-pro/package.json
"name": "ant-design-pro" 第3行 這個 名字 改成 "name": "@ifnk/ant-design-pro",
不加 斜槓的話後面 lerna操作會說名稱有問題
$ vim packages/lerna-dumi-component-lib/package.json
"name": "lerna-dumi-component-lib" ---->"name": "@ifnk/lerna-dumi-component-lib",
由於lerna-ant-design-pro 引用lerna-dumi-component-lib
所有 使用 lerna add 來 為 lerna-ant-design-pro 新增 lerna-dumi-component-lib 依賴
或者直接在packages/lerna-ant-design-pro/package.json 裡面 的 dependencies 手寫 dumi 的依賴
"dependencies": { ... "@ifnk/lerna-dumi-component-lib":"1.0.0",
執行 lernabootstrap
# ifnk @ ifnk in ~/proj/lerna-study-monorepo on git:master x [11:46:29] $ lerna bootstrap
看到 success 2 packages 就 是成功了
lerna success Bootstrapped 2 packages
然後測試下
在 dumi-lib裡面 寫個 簡單的 函式
# ifnk @ ifnk in ~/proj/lerna-study-monorepo/packages/lerna-dumi-component-lib on git:master x [11:48:35] $ exa -T -L 1 . ├── docs ├── node_modules ├── package.json ├── README.md ├── src # 這裡面寫個 ifnkSum.ts 測試下 ├── tsconfig.json ├── typings.d.ts └── yarn.lock
export const ifnkSum(num:number)=>console.log(num)
ifnkSum.ts [+]
然後在 ant d pro 裡面 引用 (這裡用登入頁面測試下)