vite+ts+monorepo从0搭建vue3组件库(一):monorpo项目搭建

57 阅读1分钟

1.创建文件夹之后,执行pnpm init 2.创建packages,在packages下创建a包和b包 3.在a和b分别执行pnpm init

// a包 packages.json
{
  "name": "@dlx-ui/a",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


// a包index.js
export default () => {
  console.log('我是a包')
}

b包内容:

{
  "name": "@dlx-ui/b",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@dlx-ui/a": "workspace:^"
  }
}

import outputa from '@dlx-ui/a'

outputa()

4.在b包引入a包

pnpm add @dlxui/a

此时会报错:原因:

请注意你当前的 pnpm 版本,在 9.0 后 pnpm 修改 link-workspace-packages 的默认值为 false。该属性开启后,你在安装依赖时优先在本地链接,而不是从 registry(远程) 中下载。
所以如果你的版本是9.0及以上,你还需要一个.npmrc文件,这个文件中添加link-workspace-packages = true,这样就会先从你本地安装

 //  .npmrc
link-workspace-packages = true

或者在b目录下执行

//  --workspace:表示从本地文件中安装
pnpm add @dlxui/a --workspace

在b目录下执行 node index.js

image.png