monorepo搭建记录

最终文件效果

1、准备环境

npm

pnpm

2、创建文件夹npm init vite // 名字可以为main(自定义)

  • 创建主应用main

npm init vite // 名字可以为main

  • monorepo下创建文件夹web

创建辅助应用 例:react-demo,具体步骤:1、 cd web ; 2、 npm init vite // 名字可以为react-demo

  • cd..退出至monorepo文件夹下生成package.json文件

pnpm init

  • monorepo目录下创建pnpm-workspace.yaml文件

packages: # all packages in direct subdirs of packages/

 - 'main'

 # all packages in subdirs of components/

 - 'web/**'

  • 下载各项目依赖,此时公共的依赖会被抽离出来

pnpm i

  • 运行任意项目(根目录或者项目的上一个文件夹下都可)

pnpm -F main dev   // 其中main为项目名

  • 新建文件夹common

common 文件夹下生成package.json文件【pnpm init】

  • 更改pnpm-workspace.yaml文件

packages: # all packages in direct subdirs of packages/

 - 'main'

 # all packages in subdirs of components/

 - 'web/**'

 - 'common'

  • common安装公共组件,例:axios

pnpm i axios

  • common文件夹下建立index.tsx文件

内容:// 举例,按实际情况来

import axios from 'axios'

export const test = axios('xxxx')

  • 为各个项目增加公共方法

1、切换至main文件夹下

2、pnpm -F main add common  // 此时main项目的package.json中已有common相关依赖

  • 使用common方法【其他项目同理,此处举例main项目】

main项目:

main.js或者其他需要该方法的文件下引用:

import {test} from 'common'

相关推荐

  1. vue3组件库(一):Monorepo项目

    2024-04-27 06:28:01       16 阅读
  2. vue3组件库(一):Monorepo架构

    2024-04-27 06:28:01       12 阅读
  3. xpath注入漏洞靶场记录

    2024-04-27 06:28:01       32 阅读
  4. centosftp踩坑记录

    2024-04-27 06:28:01       25 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-27 06:28:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-27 06:28:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-27 06:28:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-27 06:28:01       18 阅读

热门阅读

  1. Nginx(三): 项目实战之conf

    2024-04-27 06:28:01       12 阅读
  2. DNA序列k-mers哈希映射和相似序列查找

    2024-04-27 06:28:01       13 阅读
  3. webpack和vite

    2024-04-27 06:28:01       12 阅读
  4. vue使用外部的模板

    2024-04-27 06:28:01       14 阅读
  5. 债市的牛熊

    2024-04-27 06:28:01       12 阅读
  6. python数据分析与可视化

    2024-04-27 06:28:01       16 阅读
  7. Python笔记|不可变序列之元组

    2024-04-27 06:28:01       12 阅读
  8. golang学习笔记——FAQ 1.22.2

    2024-04-27 06:28:01       13 阅读
  9. mxnet gluon GRU 文档

    2024-04-27 06:28:01       14 阅读