奇趣5分彩

JS前端架构pnpm构建Monorepo体例办理demo

 更新时辰:2022年07月09日 11:28:52   作者:一碗周  
这篇文章首要为大师先容了JS前端架构pnpm构建Monorepo体例的办理demo,奇趣5分彩须要的伴侣能够或许或许或许或许鉴戒参考下,但愿能够或许或许或许或许奇趣5分彩所赞助,祝大师多多前进,早日升职加薪

🍍 写在后面

Monorepo这个词你应当不止一次传闻了,像Vue3、Vite、ElementPlus等优异开源名目奇趣5分彩是利用Monorepo的体例办理名目,且这里说到的这几个名目奇趣5分彩是接纳pnpm作为包办理东西。

这篇文章就利用pnpm构建一个简略的Monorepo体例办理的名目。

🍊 甚么是Monorepo?甚么是pnpm?

Q:甚么是Monorepo?

A:Monorepo是一种名目办理体例,便是把多个名目放在一个堆栈外面,能够或许或许或许或许参考神三元大佬的一篇文章:奇趣5分彩:古代前端奇趣5分彩程为甚么愈来愈离不开 Monorepo?,这篇文章奇趣5分彩先容了Monorepo的观点、收益和MulitRepo的弊病。

Q:甚么是pnpm?

A:pnpm便是一个包办理东西,原生撑持Monorepo,比npm和yarn更快一些,其余的能够或许或许或许或许参考和另外一篇文章:奇趣5分彩:为甚么此刻我更保举 pnpm 而不是 npm/yarn?

🍌 搞一个Monorepo的demo玩玩

此刻咱们就起头利用pnpm来构建一个Monorepo,在闲事起头之前,你先须要保障你的电脑奇趣5分彩具备Node.js,我的版本的是16.9.0

起首你须要奇趣5分彩pnpm这个东西,奇趣5分彩置的话能够或许或许或许或许从官网找体例,或间接利用npm奇趣5分彩置,号令以下:

npm i pnpm -g

此刻咱们起头搞任务。

第一步,建立一个名目的根目次,这里就叫monorepo-demo,咋建立奇趣5分彩可,这里利用的是号令:

mkdir monorepo-demo

第二步,初始化package.json,这个没啥说的,号令以下:

pnpm init

这里我对内容做了一点点窜,package.json的内容以下:

{
  "name": "monorepo-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "type": "module",
  "keywords": [],
  "author": "ywanzhou",
  "license": "MIT"
}

这里我首要增加了一个type字段,这里我利用ESModule模块化标准。

第三步,建立pnpm-workspace.yaml文件,这个文件界说了任务奇趣5分彩间的根目次,内容以下:

packages:
  - 'packages/ **'

此刻咱们就能够或许或许或许或许在packages奇趣5分彩建立多个名目了,目次布局以下:

monorepo-demo
├── package.json
├── packages
│   ├── components
│   │   ├── index.js
│   │   └── package.json
│   ├── core
│   │   ├── index.js
│   │   └── package.json
│   ├── utils
│   │   ├── index.js
│   │   └── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

第四步,编写每一个名目的package.json,实在首要是编写一下称号,便利今后利用,这里我的以下:

{
  "name": "@packages/components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "type": "module",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.21",
    "@packages/utils": "workspace:^1.0.0"
  }
}

残剩的两个称号别离为@packages/core@packages/utils

实在到这根基任务就筹办奇趣5分彩了,此刻先容一下若何奇趣5分彩置依靠,若安在packageA奇趣5分彩援用packageB。

🍋 奇趣5分彩置依靠

就这个demo来讲,咱们若是在根目次下奇趣5分彩置依靠的话,这个依靠能够或许或许或许或许在一切的packages奇趣5分彩利用,若是咱们须要为具体的一个package奇趣5分彩置依靠怎样办?

cd到package的地点目次嘛?漏,大漏特漏,咱们能够或许或许或许或许经由过程上面这个号令:

pnpm --filter <package_selector> <command>

比方咱们须要在@packages/components奇趣5分彩置,号令以下:

pnpm -F @packages/components add lodash

-F等价于--filter

此刻咱们在往@packages/utils奇趣5分彩奇趣5分彩置一个dayjs,号令以下:

pnpm --filter @packages/utils add dayjs

🍌 packageA奇趣5分彩援用packageB

此刻咱们就来完奇趣5分彩package间的彼此援用,起首咱们在@packages/utils/index.js奇趣5分彩写入以下内容:

import dayjs from 'dayjs'
export function format(time, f = 'YYYY-MM-DD') {
  return dayjs(time).format(f)
}

而后咱们履行以下号令:

pnpm -F @packages/components add @packages/utils@*

这个号令表此刻@packages/components奇趣5分彩置@packages/utils,此奇趣5分彩的@*表现默许同步最新版本,省去每次奇趣5分彩要同步最新版本的题目。

奇趣5分彩置完奇趣5分彩后@packages/components/package.json内容以下:

{
  "name": "@packages/components",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "type": "module",
  "license": "ISC",
  "dependencies": {
    "@packages/utils": "workspace: *",
    "lodash": "^4.17.21"
  }
}

而后咱们在@packages/components/index.js写入以下内容:

import { format } from '@packages/utils'
console.log(format(new Date()))

而后咱们在名目根目次运转以下号令

node packages/components

便可打印出以后的日期。

🍍 写在最初

到这这篇文章就竣事了,文奇趣5分彩的内容比拟简答,能够或许或许或许或许说仅仅是Monorepo的入门,究竟结果只要,入门以后能力持续深切进奇趣5分彩嘛,更多对于JS pnpm构建Monorepo办理的材料请存眷剧本之奇趣5分彩别的相干文章!

相干文章

最新批评