How do I install Bower packages with Yarn? - node.js

From the project's README:
Multiple Registries: Install any package from either npm or Bower and keep your package workflow the same.
I'm assuming that means that I can install my Bower packages (listed in my project's bower.json) with Yarn. If this is the case, how would I go about doing that?
I'm not seeing any mention of Bower or using separate registries in the documentation. However, I do see the Bower registry listed in the source.

UPDATE 11/4/16: Yarn decided to remove support for Bower. See the Github pull request and Bower's blog. =(
ORIGINAL:
Bower just posted a blog post about this topic. They seem excited about it, but point out that there are currently unresolved issues:
Important note: As it stands right now there still seem to be some issues regarding Bower support. We are however confident that with the help of the community, these issues will be solved quickly as Yarn steps towards 1.0 in upcoming months.
He also refers to a pull request for a bower patch.
When I ran yarn, it deleted my bower_components folder (GitHub ticket here)! I really like yarn though, can't wait for the bower bugs to get resolved.

If you add the following to package.json, bower install will be called and it works. It is a workaround though:
"scripts": {
"postinstall": "bower install"
}

Apparently, it should just work. Unfortunately, there's currently a bug where, if you have both a package.json and bower.json in the same project, only the npm packages are installed and the bower packages are ignored.
Normally, one would simply yarn or yarn install and both npm and bower dependencies would be installed.

Related

How to prevent npm from resolving devDependencies on production install

I'm building a microservice app in a monorepo containing a bunch of microservices and a commons package. This commons package is never published to npm. (packages are managed with yarn workspaces)
Using parcel, the commons package is bundled into the production code, so I don't need to install it at run time.
Each microservice runs in its own docker container. So, when I build the docker container, Ideally, I'd want to ignore this "commons" dependency and install all the other ones. AFAIK, the only way to do this is to place the "commons" package in devDependencies.
However, it seems that even if I add it only to devDependencies and run npm i --only=production, npm still tries to resolve the package and still throws an ETARGET error.
Is there some way to completely ignore the devDependencies? My only other Idea is to write a script that removes the devDependencies field from the package.json before running npm install, but I wanted to ask here first to make sure I'm not missing anything.
There is a GitHub issue on the npm/cli repo tracking this issue here (#4967), where this behaviour is categorized as a bug.
So to answer your question, as far as the current status of the GitHub issue indicates, the intended behaviour is that devDependencies don't get attempted to be resolved in --production mode, and you shouldn't need to do anything extra to get this behaviour once the fix is made. I don't think you are missing anything.
The workaround you have thought of sounds reasonable to me.
On the GitHub issue, you can indicate "me too" with a thumbs up reaction (please don't spam the comments with "me too" comments).
To install packages only at production without devDependencies,
npm install --production
Docs about npm install is here.

How do I prevent npm install from removing packages?

I'm trying to set up a development environment with several packages, and as a result I need to manually install some dependencies. More specifically, I have some local changes in several packages which I need to test before I can push them to github, so I can't just npm install the top level because it won't pick up those change. So I run the first npm install manually on packages which are missing, and then try to run my node code and see which package it is still missing, then try to npm install what it says is missing.
However, when I go to install the second package, it ends up with this message:
added 3 packages from 4 contributors, removed 799 packages and audited 3 packages in 4.197s
The second install removed practically every package that was already installed! I didn't notice this until about the third time, when I realized that I seemed to be installing the same thing over and over.
However can I prevent this particularly naughty behavior and force npm to only install what I tell it to and leave everything else alone?
Have a look at npm link if you need to test against modified packages.
From npm link:
This is handy for installing your own stuff, so that you can work on it and test it iteratively without having to continually rebuild.
Say b is a dependency of a. You made changes to b and want to check if a still works with those changes. Instead of using b in node_modules installed from npm, use your local, modified version:
cd ~/projects/b # go into the package directory
npm link # creates global link
cd ~/projects/a # go into some other package directory.
npm link b # link-install the package
Now, any changes to ~/projects/b will be reflected in ~/projects/a/node_modules/b/.
If your development flow involves updating in parallel packages which depend on one another, you might consider switching your project's package manager to from npm to yarn to take advantage of yarn's workspaces feature.
Yarns's workspaces allow you to easily setup a single monorepo containing all your interconnected dependencies, and let yarn thinking how to link them together in your dev environment.
i had a similar problem today , & thought this might help someone in the future and l have found out that if you install simultaneouly it
npm install --save package1 package2 package3 ...
it worked as l had
npm install xlsx angular-oauth2-oidc
but if you install separately it will have issues
Edit 2 More infor by #Michael
installing multiple packages in the same command also prevents hooks from being installed multiple times
Remove "package-lock.json" file befor installing the new package.
Are you saving the dependencies to package.json?
To Save : npm install --save {package_name}. This will save the package to package.json and install using npm install.
You can't particularly control the dependencies(fully). The dependencies which you have installed might be using dependencies themselves.So when you remove a package, npm deletes all the package's dependencies and the package.

relationship between webpack, npm, bower, gulp

I have recently just went in web-development and heard about these tools, I still confusing about it even I done research after, and also I have some questions as well. this is the following research I have done if there are something wrong please correct me.
Webpack is replacing bower and gulp
Bower was use to manage front end lib(eg: bootstrap), which gulp was use to manage backend lib(eg: backbone.js )
In some big project people still use gulp because give more control of the project
npm is the package manager for JavaScript.
If I want to I can install bootstrap from either npm or bower or gulp.
People choose to use bower and not just npm to install bootstrap is because npm does nested dependency tree, which Bower requires a flat dependency tree, which means faster.
Webpack replacing bower and gulp is because those are overkilling people's time.
The last thing is a question, I saw on youtube people download sass sass(which I understand is a front end thing tool)eg:(npm install gulp gulp-sass --save-dev) in gulp and then not using bower, is that even the the right way to do things? because if yes why do we still need to use use bower?
Webpack can be an alternative for gulp. Webpack doesn't do anything Bower does.
Bower was often used to manage frontend dependencies (eg, bootstrap), while npm was often used to manage backend dependencies (eg, express).
People use gulp because it's worked out for them so far, and the time/effort it takes to learn something else and switch to something else might not be worth it.
npm is a package manager for dependencies, but it isn't exclusive to JavaScript dependencies.
You can install bootstrap with Bower or npm.
Starting with version 3, npm installs everything in a flat hierarchy. You can use npm to manage dependencies that are used on the frontend AND backend, so some people don't see the point in having Bower.
Webpack can be an alternative to Gulp, but a lot of people had a hard time learning how to use Webpack.
Yes, you would npm install gulp-sass --save-dev, which installs gulp-sass with npm. I imagine gulp-sass is a tool that lets you use SASS and Gulp together. You wouldn't use Bower in any of this.

NPM package has outdated dependency, is there a way to alter its version?

Just migrated to Node 4.1.2 from 0.10. One of the packages being installed via npm install errors due to node-gyp having a problem with one of its dependencies, it's quite a few versions out of date. The issue has been brought up on the repo but hasn't seen activity since May. Is there a way to tell NPM to install this package but with the outdated dependency using a newer version?
EDIT:
I've copied over an installed version from node_modules in an older project. npm install -g npm-check-updates then ncu in the node_modules/bs-html-injector/ directory. It lists updates, ncu -u will update the package.json, npm install after. I run my gulp task and html is injecting fine, all seems fine :) Would still like to know how to do this if I didn't have a local copy installed by NPM. It looks like it's just a 1:1 copy from the github repo?
With npm, you can install packages from GitHub directly:
npm install user/repo#branch
You can fork the package on GitHub, make and propose the changes you need and use your fork as a dependency in your project until PR is merged.
you can use --force to force install it

I'm cloning a repo with Yeoman, what configuration do I need on my computer?

I have cloned a repo that has Yeoman installed.
I installed node, as well as Yeoman npm i -g yo. When I run grunt I get an error stating:
Error: Cannot find module 'load-grunt-tasks'
Warning: Task "default" not found. Use --force to continue.
What else do I need to do to be able to run this repo successfully?
The first time, you have to run npm install.
This will install all the needed dependencies as described in the package.json
Subsequently, if anyone add a new dependency into this file, you will need to run npm install or npm update again.
Actually besides npm, you should also download bower dependencies.
So it's 2-step:
npm install
bower install
If you don't invoke bower application may launch, but later you may encounter problems such as the lack of libraries.

Resources