On monorepo of rushjs + pnpm

The Ripper 2021-05-04 18:51:19
monorepo rushjs pnpm


Preface

There are many projects in the development team , So in the project, we adopted monorepo This kind of project , That is to put all the projects in the team into a code warehouse , Some common packages and components are extracted into independent sub projects or sub components are put in the same monorepo Inside the project , This makes it easy to reuse components , There are also many articles on the Internet about related benefits , Let's not elaborate here . About monorepo In fact, there are a lot of module management tools , Before that there was lerna yarn etc. , My team used to use yarn To manage monorepo Of , Recently, we have made some optimizations , change to the use of sth. rushjs+pnpm To manage , This article blog As the author of some preliminary study .

Technology selection

rushjs
pnpm
monorepo
tsdx

rushjs Go to school

Rush makes life easier for JavaScript developers who build and publish many NPM packages at once. If you’re looking to consolidate all your projects into a single repo, you came to the right place! Rush is a fast, professional solution for managing this scenario.

Excerpt from the official website introduction, To put it simply rush It's easy to see js Developers build and release multiple npm package , If you think about all the project All in the same code warehouse (monorepo) Consider using rush,rush It provides a quick and effective solution to this problem .
rush Some characteristics of ( From official documents ):

  • A single NPM install: rush Install all your project dependencies into a public folder , The role of this is not just similar to that of the project root directory package.json,rush And through the chain of symbols (symlinks) To refactor every project node_modules. This logic supports pnpm npm yarn These package managers .
  • Automatic local linking: rush repo Each item can be automatically linked to other items , No need to publish packages , It doesn't need any npm link.
  • Fast builds: rush Will analyze your dependency map and build your projects in the right order , If there is no dependency between two projects ,rush It will follow these dependencies through separate processes , This kind of multiprocessing method will be much faster than the single thread method .
  • Subset and incremental builds: Subsets and incremental builds , In a very large code warehouse , If you just want to use or develop one or two of these projects , At this point, we can specify to build a separate project ,rush rebuild --to Clean build only your upstream dependencies , When you make some changes rush rebuild --from <project> Clean build only for affected downstream projects .
  • Cycli dependencies: Circular dependencies , If a project is indirectly dependent on its old version , The project in the loop uses the last released version , And other projects are still getting the latest .( When I look at this, I don't particularly understand , The general meaning is that you can manage the circular dependency between different versions very well )
  • Bulk publishing: When it's necessary to do some work on multiple packages in the code warehouse release When ,rush Will detect changes to those packages , Automatically change all appropriate version numbers , Then execute... In each directory npm publish
  • Changelog tracking: When there is a change, it will automatically aggregate the change information into a CHANGELOG.md file

pnpm relevant

The author is also in touch soon , This is also a reference to the articles of other students in nuggets
juejin.cn/post/693204…

Environmental Science

  1. Environmental Science , The author's MAC, Use window My classmates may be different , This article is still based on MAC This development environment describes
  2. install nodejs( For the convenience of development, it may need to be installed nvm, Easy to switch between different node edition , Here's a word ,nvm There are still many network restrictions on the installation of , It may take a lot of detours ...)
  3. install yarn Not necessary , Personal development habit is from npm The switch to yarn Of , So I have local installation yarn, If necessary, you can install it yourself

Initialization work

Create an empty directory as the project directory

mkdir eason-td-monorepo
cd eason-td-monorepo
 Copy code 

install rush( Use yarn install , Or use npm It's OK )

yarn global add @microsoft/rush
 Copy code 

image.png

install pnpm

yarn global add pnpm
 Copy code 

image.png

rush Initialize project

rush init
 Copy code 

image.png

Use the editor to open , What I use here is vscode, Open it and have a look rush.json, emmm, A warning

image.png Don't panic at this time , Because it's a json The configuration file ,json Configuration files are generally not allowed to have comment Of ,vscode There's a built-in type called JSON with Comments, Specifically to identify this type , In the lower right corner, switch the type , Switch to JSON with Comments There will be no warning or error , I won't go into details here

image.png After processing according to the above step , You can see there are still some spelling tips here , Although it's not very important , Here's how to deal with it , This step can be ignored

image.png vscode open setting, Search for cSpell.words, Add to this pnpm, There should be no error alerts after that

image.png

image.png

rush.json It can specify the tool to run , Here means pnpm,npm, yarn These are a few , We specify here pnpm Can , Others can also play , Let's not go into details here

rush.json There's a lot of configuration and comment,emmm, We don't study it carefully here , Let's look at the key first , You can look at it projects This configuration , Because what we're going to create is a monorepo project , So there will be multiple subprojects in this monorepo Inside the project , So you can focus on this

Let's take a look at this location in the directory common/config/rush, Here's a corresponding pnpmfile.js file , If we don't use pnpm Words , You can delete this file , Of course! , Don't delete it here , What we use is pnpm

image.png

Create subproject

Create a project at the root of the project apps The path of , Used to place our subprojects , Let's create a landing Subprojects

mkdir apps
cd apps
yarn create react-app landing
 Copy code 

After running the above command, I will go back install All depend on , It's going to be a bit long , Then we go back to the one above rush.json Inside projects Configuration item , Add a project name and specify the corresponding directory for our new sub project , as follows

image.png

After that, we'll run another command , At this time, as long as it is in the project directory , You don't have to go to the root of the project ,rush I'll deal with it myself

rush update
 Copy code 

image.png

image.png

install When it's done , Switch to apps/landing Run this subproject under the directory , It can be used npm、yarn perhaps rushx Run the project ,rushx It's our global installation rush And then there's an order , Here we recommend rushx

cd apps/landing
rushx start
 Copy code 

image.png

At this point, the local project will run , Then open the project page in your local browser , The default is 3000 port , If the local 3000 If the port is occupied, it will prompt whether to use other ports , At this point, enter yes that will do

image.png

image.png

At this point, one of our sub applications is running , Our project is monorepo project , So a single project is not enough , More sub projects are needed to experiment , Here we continue to create projects (control + c Finish running the project just now )

Create a second subproject

Back to project root , Create a libs Catalog , The function of this directory is similar to library, Put some common components or packages in this directory

cd ../../
mkdir libs
cd libs
 Copy code 

At this time, we need to use a tool called tsdx To create our subcomponent project , Create a components Subprojects ,tsdx There are three templates to choose from , Here we choose react Can

npx tsdx create components
 Copy code 

image.png

image.png

Switch to the created path , Run the app all at once , No error was reported during operation , We will control+c End operation

cd components
rushx start
 Copy code 

image.png

One more project, At this time, we are going to rush.json Add this to it project Configuration information

image.png

Here we give the newly created project Name it @shared/components, It should be noted that , In what we created libs/components/package.json There is a default name, Here we want to keep the two sides United , Only in this way can we identify the specific corresponding project

image.png Go back to the project root and update , At this point, the dependency will be re installed

cd ../../
rush update --purge
 Copy code 

After the run, let's try in landing In this project, install the just declared “ package ”, Because at this time rush I know we're quoting a local monorepo Package in the project , So I won't try to go through the Internet npm Find the corresponding package

cd apps/landing
rush add --package @shared/components
 Copy code 

image.png

We can see the hint , Now it is link Of course project success , The next step is to run build perhaps rebuild

rush build
 Copy code 

image.png

stay landing Quote in the project @shared/components, Let's change it apps/landing/src/App.js

import logo from './logo.svg';
import './App.css';
import { Thing } from '@shared/components';
function App() {
return (
<div className="App">
<Thing />
</div>
);
}
export default App;
 Copy code 

Rerun this apps/landing The application of

rushx start
 Copy code 

image.png You can see that it's already normal at this time link Introducing local packages , At this point, basically our monorepo This is the end of the project

Conclusion

This is just a preliminary study , About rush and pnpm There are still many things I don't know about tools , If there is anything wrong in the article , I also hope that you readers can be elegant and upright .

版权声明
本文为[The Ripper]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210504184938871c.html

  1. Gallop workflow engine design series 01 process element design
  2. VUE移动端音乐APP学习【十六】:播放器歌词显示开发
  3. Vue Mobile Music App learning [16]: player lyrics display development
  4. jquery cookie
  5. jquery cookie
  6. 体面编码之JavaScript
  7. JavaScript for decent coding
  8. React17 系统精讲 结合TS打造旅游电商平台
  9. React17 system combined with TS to build tourism e-commerce platform
  10. 2021-05-04 hot news
  11. HttpSession对象与Cooike的关系 以及 Cookie对象构造函数问题
  12. gRPC-Web:替代REST的gRPC的Javascript库包
  13. The relationship between httpsession object and cooike and the construction of cookie object
  14. Grpc Web: a JavaScript library package to replace rest grpc
  15. Building reactive rest API with Java - kalpa Senanayake
  16. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  17. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  18. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  19. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  20. Vue.js比jQuery更容易学习
  21. Node.js的Reactor模式 与异步编程
  22. Vue. JS is easier to learn than jQuery
  23. Reactor mode of node.js and asynchronous programming
  24. 详解JavaScript中的正则表达式
  25. Explain regular expressions in JavaScript
  26. 详解JavaScript中的正则表达式
  27. Explain regular expressions in JavaScript
  28. JS: closure
  29. Write your own promise in promises / A + specification
  30. Analysis of the core mechanism of webpack from loader, plugin to egg
  31. On the import and export of webpack
  32. Interpretation of lodash source code (2)
  33. Hexo series (5) writing articles
  34. 有人用过JMeter或用HttpUnit写过测试吗????
  35. Has anyone ever used JMeter or written tests in httpUnit????
  36. JavaScript异步编程4——Promise错误处理
  37. Leetcode 1846. Reduce and rearrange the largest element of an array
  38. JavaScript asynchronous programming 4 -- promise error handling
  39. SQLite是一种经典的无服务器Serverless
  40. 通过Spring Boot Webflux实现Reactor Kafka
  41. SQLite is a classic server less
  42. Realization of reactor Kafka through spring boot Webflux
  43. Focus on the basic knowledge of JS
  44. Node.js与Spring Boot比较? - Ryan Gleason
  45. Compare node.js with spring boot- Ryan Gleason
  46. 「HTML+CSS」自定义加载动画【049】
  47. 「HTML+CSS」自定义加载动画【048】
  48. 「HTML+CSS」--自定义加载动画【047】
  49. "HTML + CSS" custom loading animation [049]
  50. "HTML + CSS" custom loading animation [048]
  51. "HTML + CSS" -- custom loading animation [047]
  52. 使用Akka实现Reactive DDD
  53. Prototype与JQuery对比
  54. Using akka to realize reactive DDD
  55. Comparison between prototype and jquery
  56. Please elaborate the diff algorithm of Vue
  57. On the combination of ecarts and Baidu map, in the Intranet environment to develop offline map, to achieve point, line, range value.
  58. 使用Slonik框架基于Node.js和PostgreSQL处理大量数据
  59. Using slonik framework to process large amount of data based on node.js and PostgreSQL
  60. Netflix使用React制作高性能电视用户界面