NPM忽略package.json中的jQuery版本

Question

So I'm not sure how this is happening, but when I run 'npm install' in an Angular 4 project of mine, it's completely ignoring the version of jQuery I have specified in my packages.json file, and it's installing version 1.7.4.

I have 2.2.4 specified in package.json -- I'm running bootstrap 3.3.7, and any jQuery version newer than that will break bootstrap.

The weird thing is that, when npm is running install, I get a warning message: npm WARN deprecated jQuery@1.7.4: This is deprecated. Please use 'jquery' (all lowercase). But I have no idea where thats coming from. There is nothing I'm aware of that's specifying jQuery 1.7.4 anywhere.

Any ideas?

(Edit 10-Aug-2017: Below is my package.json file, as requested. Thanks.)

{
  "name": "smartadmin",
  "version": "0.4.5",
  "license": "WRAPBOOTSTRAP",
  "angular-cli": {},
  "scripts": {
    "build:dev": "./node_modules/.bin/ng build",
    "build:prod": "./node_modules/.bin/ng build --prod --aot=false",
    "build:aot": "./node_modules/.bin/ng build --prod --aot",
    "build:aot2": "node --max_old_space_size=4096 ./node_modules/.bin/ng build --prod --aot",
    "build": "npm run build:dev",
    "clean:dist": "npm run rimraf -- dist",
    "clean:install": "npm set progress=false && npm install",
    "clean:start": "npm start",
    "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
    "e2e:live": "npm run e2e -- --elementExplorer",
    "e2e": "npm run protractor",
    "lint": "npm run tslint \"src/**/*.ts\"",
    "postversion": "git push && git push --tags",
    "prebuild:dev": "npm run clean:dist",
    "prebuild:prod": "npm run clean:dist",
    "preclean:install": "npm run clean",
    "preclean:start": "npm run clean",
    "preversion": "npm test",
    "protractor": "protractor",
    "rimraf": "rimraf",
    "server:dev": "./node_modules/.bin/ng serve",
    "server": "npm run server:dev",
    "start": "npm run server:dev",
    "test": "./node_modules/.bin/ng test",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "version": "npm run build",
    "ng": "ng",
    "pree2e": "webdriver-manager update --standalone false --gecko false"
  },
  "private": true,
  "dependencies": {
    "@angular-redux/store": "^6.3.0",
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "X-editable": "github:vitalets/x-editable",
    "bootstrap": "^3.3.7",
    "bootstrap-colorpicker": "^2.5.1",
    "bootstrap-duallistbox": "^3.0.6",
    "bootstrap-markdown": "^2.10.0",
    "bootstrap-progressbar": "^0.9.0",
    "bootstrap-slider": "^9.8.0",
    "bootstrap-tagsinput": "^0.7.1",
    "bootstrap-timepicker": "^0.5.2",
    "chart.js": "^2.6.0",
    "classlist.js": "^1.1.20150312",
    "clockpicker": "^0.0.7",
    "clone": "^2.1.1",
    "core-js": "^2.4.1",
    "debounce": "^1.0.2",
    "dropzone": "^4.3.0",
    "dygraphs": "^2.0.0",
    "fuelux": "^3.16.0",
    "he": "^1.1.1",
    "highcharts": "^5.0.12",
    "ion-rangeslider": "^2.1.7",
    "jquery": "^2.2.4",
    "jquery-color": "^1.0.0",
    "jquery-jcrop": "^0.9.13",
    "jquery-knob": "^1.2.11",
    "jquery-ui-npm": "^1.12.0",
    "jquery-validation": "^1.17.0",
    "jquery.maskedinput": "^1.4.1",
    "markdown": "^0.5.0",
    "morris.js": "^0.5.0",
    "ngx-bootstrap": "^2.0.0-beta.2",
    "ngx-popover": "^0.0.16",
    "nouislider": "^9.2.0",
    "raphael": "^2.2.7",
    "redux": "^3.6.0",
    "rxjs": "^5.1.0",
    "scriptjs": "^2.5.8",
    "select2": "^4.0.3",
    "smartadmin-plugins": "^1.0.20",
    "summernote": "^0.8.3",
    "to-markdown": "^3.0.4",
    "ts-helpers": "^1.1.2",
    "web-animations-js": "^2.2.5",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.3.0",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jquery": "2.0.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "css-loader": "^0.28.3",
    "exports-loader": "^0.6.4",
    "expose-loader": "^0.7.3",
    "file-loader": "^0.11.1",
    "imports-loader": "^0.7.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "script-loader": "^0.7.0",
    "style-loader": "^0.18.1",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3",
    "url-loader": "^0.5.8"
  },
  "repository": {
    "type": "git",
    "url": "https://bitbucket.org/grigson/smartadmin-angular-2"
  },
  "bugs": {
    "url": "https://bitbucket.org/grigson/smartadmin-angular-2/issues"
  },
  "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

UPDATE (14-Aug-2017)

I completely deleted my nodejs and npm installs using instructions I found here: How do I completely uninstall Node.js, and reinstall from beginning (Mac OS X)

Here are the commands I used:

sudo rm -rf /usr/local/bin/npm /usr/local/share/man/man1/node* /usr/local/lib/dtrace/node.d ~/.npm ~/.node-gyp /opt/local/bin/node opt/local/include/node /opt/local/lib/node_modules

lsbom -f -l -s -pf /var/db/receipts/org.nodejs.node.pkg.bom | while read f; do sudo rm /usr/local/${f}; done

sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*

I also deleted a few other 'node' and 'npm' folders and files that I found while browsing the various places mentioned in that link above (including a /Users/[myusername]/.npm folder that existed)...

Then I downloaded the node v6.11.2 .pkg file from nodejs.org, and installed it. It comes with version 3.-something of npm, so I updated npm ( npm install -g npm ) to version 5.3.0.

Then I installed Angular/CLI 1.3.0 (the newest release as of today) npm install -g @angular/cli@1.3.0 (I updated my package.json above to reflect this new version of Angular, btw.)

Then I went into my Angular project folder and ran npm install .

AND IT INSTALLED JQUERY 1.7.4 AGAIN!!!!! WTF?!!!!!!

I copied my package.json file to an empty folder and ran npm install and it did the same thing -- jQuery 1.7.4.

Ridiculous!!! WTF is going on here?!!

If anyone has ANY ideas, I'm open to ANY suggestions. This is nuts!

Answer 1

Ok -- I finally found why it's doing this...

Apparently the jQuery color-picker has a jQuery 1.7.4 dependency built-in somewhere...

When I removed "jquery-color": "^1.0.0", from my package.json file, it installed jQuery 2.2.4 instead of 1.7.4!! So at least I figured out where it's getting jQuery 1.7.4 from...

I still don't know why that dependency is forcing npm to install the wrong version of jQuery for the entire project, though... That's just weird...

Answer 2

Apparently npm turned case sensitive or something and when npm reads the the library jquery.color it loads the old deprecated jQuery 1.7.4 ... I was able to get it to work with the jquery.color reference by running this

npm install
npm install jquery

Which will force the right version of jquery to be installed after the wrong one is installed

Answer 3

Try to delete node_modules folder and do a npm cache clean .

Run npm install again

Also check in your index.html file if you are not accidentally overwrite the jQuery version with a CDN line.