What's the best way to move packages from devdependencies to dependencies in bower.json?

Question

I've been working on an angular project and whenever I wanted a new package, I edited bower.json manually and added the package to devdependencies and then ran bower install to get the dependency installed.

I never really looked at the name of the section I was adding it to, but recently I ran bower install <somepackage> -S and it created a new section called dependencies. Ohhh!!! They're supposed to go there.

I looked it up and apparently devdependencies is for development dependencies, and can be excluded during a production build and is primarily intended for packages that support testing etc. However dependencies is included in both dev and production builds, and is intended for packages that will be in the final production build.

So now I have a lot of "production" packages under devdependencies. What is the best way to move them to dependencies without breaking anything?

Bocanegra

cut and paste them from one section to the other? – Giantess

@JBNizet Are there any problems with that? I'm using angular boilerplate. The instructions specifically say the install with bower install --save-dev – Bocanegra

Answer 1

Dependancies in bower will install to your bower_components folder regardless of whether you mark them as dev dependancies or not. Bower will always fill the bower_components folder with what is listed in dependancies and, depending on your instructions, possibly what is listed in devDependancies. In your case if you know which packages are only required for development you can just simply move them into the proper object. If things are working for you now with your dependancies in devDependancies then nothing will break if you move them to dependancies.

For example

{
  ...
  "dependencies": {
    "angular": "1.5.11",
    "angular-resource": "1.5.11",
    "angular-sanitize": "1.5.11",
    "babel-core": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^3.9.1"
  }
}

would become

{
  ...
  "devDependencies" {
    "babel-core": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^3.9.1"
  },
  "dependencies": {
    "angular": "1.5.11",
    "angular-resource": "1.5.11",
    "angular-sanitize": "1.5.11"
  }
}

As a side note, you should consider migrating your project to Yarn per the recommendation by Bower themselves. You can find information on how to do that here.

Displeasure