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 里面 引用 (这里用登录页面测试下)

 

 

lerna monorepo  使用  ant design pro 与配套库 踩坑

 

加上这个
默认不编译node_module里面的文件。

需要把你要编译的依赖库加进去。

 

上一篇:【前端VUE3】vue3 + ant-design-vue3 (axios vuex router)


下一篇:ant design vue 使用过程中遇到的问题总结(一)