1. 程式人生 > 其它 >lerna monorepo 使用 ant design pro 與配套庫 踩坑

lerna monorepo 使用 ant design pro 與配套庫 踩坑

首先安裝 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 裡面 引用 (這裡用登入頁面測試下)

加上這個
預設不編譯node_module裡面的檔案。

需要把你要編譯的依賴庫加進去。