Is there any way to share the same dependencies in monorepo with yarn berry workspaces? - yarnpkg

I'm currently building a monorepo with yarn berry.
So i've had to make a lot of many package.json to control the each of workspaces.
But i noticed there are too many the same dependencies in the each workspace, and if i want to update one of dependencies, i have to update many times unnecessarily.
So this is /package.json on the root level:
and this is /packages/button/packages.json:
As you can see, there are some of the same dependencies, so i'd like to share or extend the root one ( or other package.json )
Is there any way to do this?
If you help me out, it'd be a huge help :)

Related

Microservices monorepo w/ Prettier & linting

I have a project with 4 microservices in total, 3 in PHP and 1 in JS, in 1 monorepo. I love to use Prettier for both languages and I want to use ESLint for JS and CS Fixer for PHP to assure code quality. Right now I have a Prettier installation and configuration for each package.
/js1
/.eslintrc.json
/prettier.config.json
/js2
/.eslintrc.json
/prettier.config.json
/js3
/.eslintrc.json
/prettier.config.json
/php1
/prettier.config.json
For the JS packages theres quite some overlap in the configuration. However, there're also specific plugins or settings for Prettier per microservice. The same goes for ESLint for the JS microservices.
I'm thinking about how to
Run Prettier, ESlint and PHPfixer from the root of the project.
Share the configuration, but have microservice-specific config as well.
Optimally run the formatting and linting on staged files as well.
Every solution I found focusses on a frontend-only project and tools like Lerna are not maintained well.
I thought about the following approaches
Use NPM workspaces to install Prettier once on the root, but where do I install Prettier and where its Plugins?
Add Prettier / ESLint scripts to the root packages.json and run them with concurrently (package).
Have a base Prettier config for JS and PHP, extend them in the project directories.
I'm very unclear about what the best practice is, so please share articles, opinions or tools with me.

How to use yarn nohoist for a sub-dependency in a monorepo

I maintain monorepo for react-querybuilder that uses Yarn workspaces. I have recently updated the dependencies as part of PR #293, but the build is failing on the chakra package.
The error message is related to this Chakra issue. The recommended workaround by the Chakra maintainers is to add the following to the root package.json:
"resolutions": {
"csstype": "3.0.10"
}
However, when I do that, the material package fails to build due to a problem with the same package. It seems the material and chakra packages need different versions of csstype.
A potential complication is that csstype is not a direct dependency of either package.
How do I use nohoist to make sure the csstype dependency is fixed at v3.0.10 for the chakra package, but v3.0.11 for material?
I've tried a few things locally but can't seem to get the csstype package to sit in the chakra/node_modules or material/node_modules folders.

Why and when does yarn decide not to hoist a package in a workspace?

I'm working on a large project using yarn workspaces. I know that yarn workspaces essentially does two things
It automates the symlinking process we had to do manually years ago when we want to share private packages
It hoists all similar packages at the top in node_modules in order to be more efficient.
However, I have noticed that my packages still contain code in their own node_modules and I'm not sure why. When I make a sample monorepo app and say I install lodash in one, it goes straight to the root node_modules.
Why and when does yarn decide to install a package inside a package's node_modules ?
I found the answer on yarn's Discords. yarn will always hoist unless it would conflict with another version.

lerna advantage with yarn workspaces, why use lerna at all

I'm trying to setup a mono repo and came across lerna+yarn. My problem is, what is the actual advantage I get in using lerna. I can use yarn workspaces only and have the same functionality. I came across the following Are there any advantages to using Lerna with Yarn workspaces? but here there is no specific answer as to the specific advantage of using lerna.
as stated in the yarn workspaces documentation,
workspaces are the primitives that tools like lerna can use
You might have a project that only needs workspaces as "primitives", and not lerna. Both are tools, but lerna as a higher-level-tool than yarn workspaces helps you organize your monorepo when you are working on open source or in a team:
The install (bootstrap) / build / start-scripts are at the project root:
meaning one install and package resolution instead of one for each package
node_modules at the root is 'fat', in sub-projects it's tiny: One place to look for when you resolve package conflicts
parallel execution of scripts in sub-projects: E.g. starting up both server and frontend development in watch-mode can just be one command
publishing and versioning is much easier
There is certainly a lot of overlap between the two. The big difference is that Lerna handles package management, versioning and deployment.

NPM caching similar to a local Maven cache

Gradle's dependency management system stores downloaded artifacts in a local Maven cache. When a build requests that same dependency again the dependency is simply retrieved from the cache, avoiding any network transfer of the artifact.
I'm trying to replicate this behavior with NPM for building JavaScript projects. I was expecting NPM to support a global node_modules cache, but installing a package "globally" in NPM has a different meaning => the package is added to PATH so that it can be used as a CLI tool.
Reading the documenation for npm install, the standard behavior is to install packages into a local node_modules directory. But this would mean many duplicated packages on the system wasting valuable disk space. It also poses a problem for doing clean production builds, since ideally the node_modules should be blown away each time.
Does NPM support something like the Gradle's Maven caching? Documentation on NPM cache doesn't make it any clearer how this is to be used. What's more, it's not obvious if a caching strategy with NPM is safe across multiple parallel builds.
This seems like such a basic requirement for busy CI environments that it must have been solved before. I found the npm-cache tool which seems to offer this support, but it would be much better if caching was supported natively in npm itself.
Thanks!
IMHO it is a pity that the makers did not learn from things like maven that have already been there. If you are doing microservices and have many apps on your machine and you might also have multiple branches or a local jenkins you will have each dependency N*M times on the disk what is an extraordinary waste of disc-space and performance. So you have to be aware that Java or .NET/C# are mature ecosystems while the JavaScript ecosystem is still in the childhood with lots of flaws and edges. But JavaScript is evolving fast so lets hope for the best. Feel free to discuss your pain with the npm makers (https://github.com/npm/npm/issues/).
However, a partial cure comes if you go away from npm and switch to yarn: http://yarnpkg.com/
NPM Cache already comes bundled with NPM out of the box(listed under cli commands). And its main utility is to avoid the network transfer of the same package over and over.
Regarding the duplicate packages issue, as of npm v3 there has been an effort in terms of finding ways to deduplicate dependencies. But it still does not work exactly like Gradle since it is still possible to end up with duplicates of the same package in your node_modules folder.
Per NPM documentation:
Your node_modules directory structure and therefore your dependency tree are dependant on install order
Although a fresh npm install from the same package json always produces the same dependency tree:
The npm install command, when used exclusively to install packages from apackage.json, will always produce the same tree. This is because install order from a package.json is always alphabetical. Same install order means that you will get the same tree.
So at least there is a way to get consistent dependency trees, albeit there's no guarantee it will be the most efficient one. At least those differences do not interfere correct functioning of NPM.
Hope that helps.

Resources