CODEWITHSUNDEEP
node.jsgitreactjsreact-reduxnode-modules
Addinall
Addinall

Reputation: 349

Advice on managing React node_modules

G'day. I have been working on a new, and LARGE application for about a year. During the course of the work I have been using two identical machines, one at work, one in the office. Source shared via github. The machine at home gets synced with git, the machine at work does a lot of the heavy lifting. Due to bugs and a search on Google, the advice I got (and it seems reasonable) to re-install the vendor development side of React, by

rm -rf node_modules
npm install

The application fell into a screaming heap and I don't think it has a chance of running! The file package.json is identical on one machine to the other, however, after running an npm install on only ONE machine there are 4435 files in node_modules that differ!

This is nightmarish for version control and software security. I didnt build the package file by hand, npm did it during the course of "Ah, I need that"

npm install redux-form --save

The package file.

{
  "name": "asset_intel",
  "version": "1.0.0",
  "description": "Application re-write for Asset-IQ Dealer network",
  "main": "index.js",
  "repository": "",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack --config webpack.config.js"
  },
  "author": "Mark Addinall",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.5.0"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "babel-polyfill": "^6.23.0",
    "babel-preset-stage-1": "^6.1.18",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "lodash": "^3.10.1",
    "prop-types": "^15.5.10",
    "react": "^0.14.9",
    "react-addons-update": "^15.5.2",
    "react-autosuggest": "^9.0.1",
    "react-bootstrap": "^0.31.0",
    "react-bootstrap-autosuggest": "^0.5.0",
    "react-dnd": "^2.4.0",
    "react-dnd-html5-backend": "^2.4.1",
    "react-dom": "^0.14.9",
    "react-dropzone": "^3.13.2",
    "react-hot-loader": "^1.3.1",
    "react-images-uploader": "^1.0.1",
    "react-redux": "^4.0.0",
    "react-redux-modal": "^0.5.2",
    "react-router": "^2.8.1",
    "react-sparklines": "^1.6.0",
    "react-widgets": "^3.4.8",
    "redux": "^3.0.4",
    "redux-accordion": "^1.0.721",
    "redux-ajax": "^1.0.5",
    "redux-form": "^6.5.0",
    "redux-promise": "^0.5.3",
    "redux-tooltip": "^0.7.2",
    "style-loader": "^0.16.1",
    "youtube-api-search": "0.0.5"
  }
}

Not terribly complex. I decided to stick the working node_modules up into git and I think I will make the versions stick in package.json.

How do others manage this control in complex applications?

Cheers, Mark.

Upvotes: 0

Views: 130

Answers (2)

coagmano
coagmano

Reputation: 5671

There are a few approaches to this:

1. Package Locks

Both npm (I think from version 3, though 5+ is much better at it) and yarn automatically generate lockfiles so that a new install will install the exact versions that the last install used.

Note that by default versions may still change on npm install. The default version range used is semver-minor (1.1.x), meaning any updates that only changes the minor version may be selected on install. This is usually fine as semver dictates that these must be backwards compatible bug fixes. Unfortunately some developers don't respect semver properly

2. Pinning dependency versions

The version declarations in package.json can be pinned to an exact version by omitting the ^ that npm adds by default. More information about version selection and semver here.

3. Shrinkwrap

Shrink wraps are just package locks with greater priority, often used before publication.

Upvotes: 1

Slawa Eremin
Slawa Eremin

Reputation: 5415

I think, you should read article about package locks: https://docs.npmjs.com/files/package-locks and use it, because in your case you have updated a lot of library at once. When you have the lock file, you actually do not need node_modules in your git repository

Upvotes: 3

Related Questions