bower.json manually adding dependency of installed package - frontend

I installed package with bower.
This package has dependency of another package, but bower doesn't know it.
How do I manually add installed package dependency to be something in bower.json file?

There is no official way of doing this so here are a number of solutions:
fork the project on on github for example, add the correct dependencies in bower.json and use that repo in your own project (optionally you can then issue a pull request to the origin author)
use the unofficial overrides property to override the package dependencies as need, and then use a build tool such as main-bower-files, wiredep
use a custom pluggable resolver (a bit of an overkill just for this)

Install package again with command: bower install --save

Related

Can I move some npm dependencies into another project and then to install that project as a dependency?

I try to move some dependencies from a project to another project in order to have a cleaner view in my package json regarding the project I work on. Most of dependencies I mention are build dependencies, so they are somehow poluting my actual project. I prepared the sub-project with only a package.json containing those build packages as devDependencies, and I published to npm, then I installed that package as a devDependency into my project. So far, so good... except npm does not install the packages contained by the sub-project.
What am I missing?
Solved! I just had to set packages in sub project as dependencies, not devDependencies.

Is there a way to save an NPM package that is no longer on NPM?

I am using a package that used to be available on NPM but since then it has been removed from NPM and GitHub.
I still have the package downloaded in my node_modules folder.
Is there a way to save that package and keep it in my node_modules? I am okay with maintaining the package myself.
It would also be great if I could sync just this specific package with Git so I can share it with my teammates.
You can use that package as a local module and install it as a package in your application.
Check this out: Local dependency in package.json

Install the dev dependencies of my dependencies

I have a monorepo where I have a /packages folder with many packages.
I can use npm i ./packages or npm i if they are already specified using using the file pointer.
Looks something like this:
"dependencies": {
"#reggi/command": "file:packages/command",
"#reggi/dep-merge": "file:packages/dep-merge",
"#reggi/dep-merge-cli": "file:packages/dep-merge-cli",
"#reggi/dep-pointer": "file:packages/dep-pointer"
}
The issue is that if I install these packages I don't get dev dependencies.
What I really want is to also install the devDependencies of these dependencies.
lerna a popular tool that has pioneered the usage of monorepos, suggests that you should add all the devDependencies for these packages in the root package. The issue with this is that it eliminates the ability for two packages to depend on different versions of a given dev dependency.
What I have done is created a script that merges all the devDependencies into dependencies at preinstall then undoes the changes. This works but can be kind of wonky at times, especially when explaining all this to shrinkwrap.
It would be nice if I could just npm i --allDevDepsFromDeps and it would install all of my dependencies dev dependencies.
Is there any other solution I am missing?
I don't see what you're trying to achieve there, aren't the devDepencies used for ... development?
If you want different version for different package just don't put them in the root but in each package.
The issue is that if I install these packages I don't get dev dependencies.
You should consider those packages as 'production'/'bundled' packages, you don't need dev dependencies in this case.
For example, when you are working on #pkg/A, it will have its own devDep but then if you work on #pkg/B that depends on #pkg/A, the #pkg/A should be the production/bundled version (without devDeps).
Maybe you should have a look at bundledDependencies or peerDependencies, that might help you.

difference between jspm install and npm install

I'm relatively new to jspm. I wanted to know what the difference is when is run jspm install package and npm install package. I know that there is a lookup with jspm/registry. But what's the difference when it comes to setting up config.js. Are there any additional changes to be made if the package is installed using npm?
npm and jspm are both package managers.
npm is used for the node ecosystem, and traditionally served back-end dependencies.
To enforce the separation between front-end and back-end, developers used tools specifically for front-end. There came bower and the likes... as well as jspm.
I wanted to know what the difference is when is run jspm install package and npm install package.
Here are some differences between npm and jspm:
- jspm stores its dependencies in jspm_packages whereas npm stores them in node_modules
- jspm uses a flat dependency tree
- jspm allows you to configure arbitrary registries to get your dependencies from (github and npm are configured by default)
- even if jspm tracks module declaration and mapping, as well as configuration, into its own file (config.json), it actually defines the project dependencies inside the package.json (within the property jspm)
- you could use jspm packages either for a jspm project, or for a node / web project
- jspm is in fact just a package manager which wrap around the configuration system of SystemJs
So when you install a package from jspm it uses SystemJs configuration and set up the mapping between the dependencies, allowing you to export the project as any module types (AMD, CJS, esm, umd ...).
Are there any additional changes to be made if the package is installed using npm?
jspm install package makes a lookup in the jspm registry.
If no package is found, it means that you have to specify from which registry this package is coming from.
For an npm package it is: jspm install npm:package.
You can of course specify a specific version by appending #version at the end of the package name.
jspm also allows you to declare a shorthand to map this library within your code.
for more info see documentation: http://jspm.io/docs/installing-packages.html
Both are package managers and essentially do the same function however here are some differences:
Npm will track packages in the package.json file whilst jspm will use the config.json file.
Npm will store it's packages in a node_modules folder whilst jspm will use a jspm_components folder.
Jspm is more commonly used to bring in client-side\front-end libraries and npm for server-side ones.
Restoring packages will normally follow like this:
Run npm install (should install jspm amongst other libraries)
Run jspm install

What does -save-dev mean in npm install grunt --save-dev

I've just started using Grunt.js. It is pretty hard to set up and I am at the point of creating a package.json file.
Following this tutorial, it says there are 3 ways to create a package.json file.
The first is to do npm install grunt --save-dev
But what does --save-dev means? I tried looking but it ends in vain.
--save-dev: Package will appear in your devDependencies.
According to the npm install docs.
If someone is planning on downloading and using your module in their program, then they probably don't want or need to download and build the external test or documentation framework that you use.
In other words, when you run npm install, your project's devDependencies will be installed, but the devDependencies for any packages that your app depends on will not be installed; further, other apps having your app as a dependency need not install your devDependencies. Such modules should only be needed when developing the app (eg grunt, mocha etc).
According to the package.json docs
Edit: Attempt at visualising what npm install does:
yourproject
dependency installed
dependency installed
dependency installed
devDependency NOT installed
devDependency NOT installed
devDependency installed
dependency installed
devDependency NOT installed
There are (at least) two types of package dependencies you can indicate in your package.json files:
Those packages that are required in order to use your module are listed under the "dependencies" property. Using npm you can add those dependencies to your package.json file this way:
npm install --save packageName
Those packages required in order to help develop your module are listed under the "devDependencies" property. These packages are not necessary for others to use the module, but if they want to help develop the module, these packages will be needed. Using npm you can add those devDependencies to your package.json file this way:
npm install --save-dev packageName
To add on to Andreas' answer, you can install only the dependencies by using:
npm install --production
When you use the parameter "--save" your dependency will go inside the #1 below in package.json. When you use the parameter "--save-dev" your dependency will go inside the #2 below in package.json.
#1. "dependencies": these packages are required by your application in production.
#2. "devDependencies": these packages are only needed for development and testing
Documentation from npm for npm install <package-name> --save and npm install <package-name> --save-dev can be found here:
https://docs.npmjs.com/getting-started/using-a-package.json#the-save-and-save-dev-install-flags
A package.json file declares metadata about the module you are developing. Both aforementioned commands modify this package.json file. --save will declare the installed package (in this case, grunt) as a dependency for your module; --save-dev will declare it as a dependency for development of your module.
Ask yourself: will the installed package be required for use of my module, or will it only be required for developing it?
For me the first answer appears a bit confusing, so to make it short and clean:
npm install <package_name> saves any specified packages into dependencies by default. Additionally, you can control where and how they get saved with some additional flags:
npm install <package_name> --no-save Prevents saving to dependencies.
npm install <package_name> ---save-dev updates the devDependencies in your package. These are only used for local testing and development.
You can read more at in the dcu
–save
The package installed is core dependency.
–save-dev
The package installed is not a core rather development dependency.
Use only when developing
--save-dev means omit in production environments, use only in development environments (smaller, and probably faster).

Resources