I am confused as to what goes in the root package.json in a lerna monorepo.
say all my subprojects use react, does react go here?
What about references to other local packages?
say I have a package #cutting/devtools.
if i put it in the root package.json, it is not symlinking it to the root node_modules.
"devDependencies": {
"#cutting/devtools": "0.11.8",
And if I increase the local package version, it tries to find it in npm but when I run lerna list, it is in the list
I dont understand why.
Related
In package.json, I have:
"vue-search-select": "github:my-github-account/vue-search-select"
And then run npm install, no error.
In app.js, I try to import the forked package:
import { ModelSelect } from 'vue-search-select';
When I run npm run watch, got the below message:
Module not found: Error: Can't resolve 'vue-search-select'
UPDATE:
I compared the original version and forked version in node_modules: Original contains dist folder but forked version don't have. In github, the original one also don't have this folder. And dist is included in .gitignore.
I understand that, for package.json GitHub URL, As of version 1.1.65, you can refer to GitHub URLs as just foo:user/foo-project, as seen here.
But I would still recommend a more complete URL instead:
git+ssh://user#hostname:project.git#commit-ish
git+ssh://user#hostname/project.git#commit-ish
git+http://user#hostname/project/blah.git#commit-ish
git+https://user#hostname/project/blah.git#commit-ish
That way, you control the scheme (HTTPS or SSH) and can check which credentials (cached username/password for HTTPS or private key for SSH) is used.
The OP Wilson comments in the discussion that adding dist/ to the repo could be an option, as in here.
A prepare script can be declared in the package.json, such as this one.
"scripts": {
"build": "tsc",
"prepare": "npm run build"
},
As noted in Wilson's answer
the important thing is that the prepare script is added in forked package, not in the project that using the package.
Finally, I found a solution:
Add "prepare": "npm run lib:build" (or something else depends on the package how to build, can check it in package.json) to scripts of package.json to the forked package. And push to github.
Then, in the project that using the forked package, just keep "package-name": "github:my-github-account/package-name" in package.json and run npm install again. No other changes.
Let's say a I have the following monorepo structure using Yarn workspaces:
node_modules
packages
admin-app // WEB APP FOR ADMIN DASHBOARD
user-app // PUBLIC WEB APP FOR REGULAR USERS
packages.json
Let's say both admin-app and user-app will need to install React as a dependency.
Here is what I'll do to add React on both workspaces:
yarn workspace admin-app add react
yarn workspace user-app add react
Currently, this results in both of my packages depending on "react": "^17.0.2".
Inside my root node_modules, I can see that there is only one react folder in it. And the version is, as expected, 17.0.2.
But what if at some point I update React on admin-app and maybe forget to update it on the user-app. How will yarn install those two different versions of React? For example: 17.0.5 and 17.0.2?
As a I writing this question I've decided to test it.
Here is what I did:
yarn workspace user-app add react // THIS WILL INSTALL THE LATEST 17.0.2
yarn workspace admin-app add react#17.0.1
This was the result:
node_modules
react v17.0.1
packages
admin-app
user-app
node_modules
react v17.0.2
Yarn chose to keep the older version 17.0.1 in the root node_modules folder, and it installed the 17.0.2 in the user-app/node_modules folder.
There are more and more front-end projects, and each project has its own node_modules folder.
There are a lot of duplicate files in the modules folder.
How can we manage the dependency packages of all front-end projects in one folder like Maven in IDEA?
Demand：
When running and packaging different projects, WebStorm can refer to the dependent packages in a specified folder.
When run npm install, computer will check whether the public dependency package folder has the dependency version that the current project needs to use.
If so, you will not download the installation.
If not, you will download your own dependency to the public folder.
When multiple versions exist in the same dependent package, the project can automatically reference the correct version.
Maybe after reading my question, you know my actual needs better than I do. Thank you.
If you look in the package.json file in any front-end project with npm you will see all the dependencies in the current project and can manage the versions there. npm install installs the dependencies listed in that file.
Read more about package.json here: package.json
Using the yarn workspace
Yarn workspace features, and solves
multiple projects repeat node in large quantities_ Black hole problem of modules disk
when NPM install is executed for a project, all dependent packages will be placed in the node of the project in the current project_ Install it again under the modules folder
2.1 when installing a new dependency package, you should update the package.json of the subproject, and then execute the yarn install in the root directory to install it
Install the yarn tool first
npm i yarn -g
If there are projects project-a and project-b in the root folder, the directory structure is as follows:
root
project-a
project-b
create package.json in the root folder, with the following contents:
{
"private": true,
"workspaces": ["project-a", "project-b"]
}
ensure that the name attribute values in the package.json of project-a and project-b projects are:
Package.json in project-a:
{
...
"name": "project-a"
...
}
Package.json in project-b:
{
...
"name": "project-b"
...
}
use the command line tool to enter the root folder and execute the yarn install
3.1 after installation, you can enter the normal start-up project
tips:
4.1 all dependent packages will be installed at root/node_ Under modules folder
4.2 node of subproject_ The related link file will be generated under the modules folder, do not delete it
4.3 when installing a new dependency package, you should update the package.json of the subproject, and then execute the yarn install in the root directory to install it
Below is the description of the issue:-
Expected behaviour is to have a package-lock.json file generated for every package in packages folder.
Current Behaviour
My current project structure look like:-
packages/internal-package-1/package.json
packages/internal-package-2/package.json
packages/internal-package-3/package.json
lerna.json
package.json
package-lock.json
Right now as shown above there is only one package-lock.json file which is generated for . the entire project and it only contains the dependency which in top package.json file.
My expectation was that for every package.json file corresponding package-lock.json should be generated but that is not the case. Furthermore, the top package-lock.json file only contains the dependencies in the top package.json and not the all the dependencies which are declared in evey package.json file.
Now, if we try to consume for example internal-package-1 in a different project that as there is no lock file for this package , latest version of the dependencies gets downloaded which is not the expected behaviour.
Possible Solution
Possible solution or expectation is to have a lock file generated for every package.
lerna.json
{
"packages": [
"packages/*",
"packages/Foundation/src/SampleNestedModule"
],
"version": "0.0.0"
}
This issue is affecting us because as the lock file is not generated for every package and if i try to consume the internal-package-1 in a different project then locked dependency are not getting downloaded but the latest version of them gets downloaded.
We are hoisting the dependency hence we have modified our npm install script as below:-
"install": "lerna bootstrap --hoist" , this correctly hoists the dependency but does not generate the lock file for individual package.
Executable Version
lerna --version 3.17.0
npm --version 6.10.1
yarn --version Not using yarn
node --version 10.16.0
| OS | Version |
MACOS
| NAME | VERSION |
| macOS Catalina | 10.15.2 |
Below are some of the post regarding same which i have already looked into-
https://github.com/lerna/lerna/issues/1462
https://github.com/lerna/lerna/issues/2105
Thanks,
Vishesh.
I couldn't find a concrete solution to generate lock files for all packages. I mean there are ways but, everything is increasing the installing time to very high. Below are 2 ways to generate package-lock.json file for all packages:-
Directly use lerna bootstrap without --hoist flag ------- This does generate lock file but increases the install time way to high.
Use "lerna exec -- npm i" ------ This will generate the lock file but "install" times are way higher not a viable solution with 25 packages in my repository.
As above 2 solutions were taking way to much time hence i considered them as not a feasible solution for large repos hence, i came up with a third way or i would call it a workaround , this is also not the cleaneast solution but does the job with very slight increase in installation time.
Create a npm script in all your packages which would generate only package-lock file without installation which would be something like below:-
"genPackagelock": "npm i --package-lock-only"
In you root package.json file as part of postinstall call the above defined script for all the packages as below:-
"postinstall": "lerna run --parallel genPackagelock"
The above "postinstall" basically generates package-lock.json file for all the packages along with the internal dependencies.
I tried editing inside node_modules but the files are taken from dist and src seems to be ignored.
I tried npm run build to see if I can push my changes to dist but that doesn't work either as other dependencies seem to be missing.
UPDATE:
I followed the instructions about set up dev env in the Contributing section of the docs.
Made the changes and did yarn and yarn build
But the dist folder is identical to the one without my changes
What gives?
Instructions in the set up dev env in the Contributing section work.
After running "yarn build" in the cloned repository folder, you can copy the contents of the dist folder under packages/vuetify to the dist folder under node_modules/vuetify of the app being developed and your changes can be tested.
You can also do npm run build inside packages/vuetify for subsequent changes.
You can edit code in node_modules/vuetify/lib/components/VSlider/VSlider.js
Then, you install patch-package and execute path package vuetify
Delete node modules and execute yarn to create new node modules
Last, yarn serve, you see your code is work
https://www.npmjs.com/package/patch-package