How to count all npm packages used in the monorepo project? - npm

The current project is an older monorepo project, which uses yarn to manage dependency packages, and many subprojects use phantom dependencies. At present, the project is gradually migrating to pnpm, but there is a problem that each subproject uses many npm packages that are not in its own package.json. However, there are dozens of such sub-projects, and manual statistics are a very heavy workload. Is there any good tool that can help me find out all the npm packages that each sub-project depends on through text analysis? In this way, I can find all missing dependencies by comparing the subproject's package.json and add them to the subproject's package.json.
There is currently no good idea to solve this problem. In the search tool, if there is no such tool, consider using python to write a new one.

Related

Is there some pattern to update and rebuild all project with a npm lib dependency?

I have a lot of projects that depends from a core library. I would to know if exist a pattern or a strategy to update the package.json of these projects automatically and rebuild them with Jenkins, when the core library it's update.
Do you have any similar experience?

Inherit or share package.json dependencies

We got couple of different projects that are using main dependencies like React and TypeScript packages. Each of those projects(maintained by different dev team) is using diferent version of React and TypeScript - question here:
Is there any clever way to share/inherit/force to use specific version of main dependencies across all those projects? i.e.:
Yes, this is definitely possible. Simplest way is to create an npm module with the required common dependencies in a package.json file and publish this into your repo. Then in the projects, require that published npm module as a dependency. The projects can than further require other dependencies and override any from the parent if needed.

Typescript: Yarn Workspaces IDE Support (IntelliJ, VSCode ...)

Working on a larger typescript project we decided to move the code to a monorepo with yarn workspaces.
We use webpack to build and bundle and everything works well (especially the linking between local modules/packages).
Since yarn workspaces will store most of the node_modules in the mono repo's root folder, the IDE (IntelliJ as well as VSCode) have problems resolving the imports to any node_modules when coding inside a "inner" project (so called "package" of a monorepo).
The strange thing is that imports are not known but on the other hand most of the time you can navigate to the correct source / definition within the IDEs for the same import if you write it down manually.
We have tried to tell IntelliJ to look into another folder for node_modules, but still not satisfying.
Please share your experience with yarn workspaces / monorepo (e.g. lerna) and how you develop the code living in these monorepos.
Which IDE do you use?
Did you add any special configurations to the IDE and/or package.json, tsconfig.json?
https://github.com/Izhaki/mono.ts
It uses yarn workspaces and marry well with VSCode. I hope the README is clear enough.
Basically, use two (parallel) typescript configuration trees:
Pre-build - uses aliases (for VSCode, tests, webpack, etc).
Build - uses typescript 3 project references for publishing essentially.
IDEA doesn't provide any support for Yarn workspaces; if you miss it, please follow WEB-29250 and linked tickets for updates.
You can try adding path mappings to your tsconfig.json - see https://intellij-support.jetbrains.com/hc/en-us/community/posts/207656825/comments/115000529564
Upodate as of 2018.1.1 IntelliJ now supports yarn workspaces so if you use this there should not be a problem.
https://blog.jetbrains.com/webstorm/2018/04/webstorm-2018-1-1/
Please share your experience with yarn workspaces / monorepo (e.g. lerna) and how you develop the code living in these monorepos.
Which IDE do you use?
Since you are asking. I basically ran into the same issues as you did. One solution I was looking into was disable hoisting node modules as described here. Unfortunately it seems it is not yet in the stable release.
What I ended up was ditiching workspaces for now until they fix either the IDE or release the nohoist option. Instead I am using lerna for now. It is less convenient but it does not hoist so that both the build tools and the IDE are satisfied.
Oh, I am also using IntelliJ (ultimate)

Did any tools or method can distinguish code dependencies from tool dependencies in npm packages

As we all know, there are many npm packages dependenced by our project. Did any tools can distinguish code dependencies from tool dependencies. I am really confused.
Thanks.

Using gulp and bower together

I feel comfortable using Gulp for compiling scss, minifying it, minifying and concatenating scripts etc. For installing vendor libraries bower seems really nice to me due to its flat dependency tree. But when I install Gulp locally with
npm install gulp
it creates a node_modules folder with lots of different libs except Gulp itself. So I it comes to that I don't actually need bower and I may use these libs. But I really don't like npm's complicated dependency tree. Perhaps, I could somehow install only Gulp itself and use just bower for dependencies?
And what about package.json and bower.json? Do I really need both of them in the project or maybe they duplicate one another's functions? In general, I'm feeling a bit of confused with how to use bower and gulp together. Maybe someone could clarify those moments to me?
Gulp is an automated build tool you get with nodejs's package manager npm, it's used to run tasks such as concatenating, compiling sass, etc.
Bower is a dependency management tool whereby it fetches libraries, and their dependencies for your project. It does nothing but dependency management.
An example of how the two are used together would be fetching bootstrap and jquery with bower, then using gulp to copy the relevant scripts (jquery.js &bootstrap.js) to your websites assets folder.
Basically you'd use bower to fetch a library, such as jquery, then you'd use gulp to minify your jquery code.
A final example would, you use bower to fetch jquery, bootstrap, and say angularjs, you then use gulp to concatenate them into one file 'vendor.js', to save http requests in your app.
Hope those examples shine some light on how the two are used together.