npm更新VUE package.json文件中依賴的包版本

1.安裝npm install -g npm-check-updates

可能會(huì)出現(xiàn)以下錯(cuò)誤：

npm ERR! syscall mkdir
npm ERR! path D:\node\node_global\node_modules\npm-check-updates
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, mkdir 'D:\node\node_global\node_modules\npm-check-updates'
npm ERR!  [Error: EPERM: operation not permitted, mkdir 'D:\node\node_global\node_modules\npm-check-updates'] {
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: 'D:\\node\\node_global\\node_modules\\npm-check-updates'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR!     D:\node\node_cache\_logs\2022-03-07T06_46_10_432Z-debug-0.log

以上錯(cuò)誤的原因：

沒有權(quán)限創(chuàng)建文件夾

解決方案：使用CMD命令，用管理員打開，在該目錄下執(zhí)行該命令

2.執(zhí)行下面命令

（顯示當(dāng)前目錄下項(xiàng)目中所有新的依賴包）

ncu 

3. 更新項(xiàng)目package文件

ncu -u

或者 

npx npm-check-updates@next --upgrade

以上操作完畢之后，查看 package.json 文件，可以看到依賴包已經(jīng)更新

package.json文件解釋說明

什么是package.json文件？           

什么是Node.js的模塊（Module）？在Node.js中，模塊是一個(gè)庫或框架，也是一個(gè)Node.js項(xiàng)目。

Node.js項(xiàng)目遵循模塊化的架構(gòu)，當(dāng)我們創(chuàng)建了一個(gè)Node.js項(xiàng)目，意味著創(chuàng)建了一個(gè)模塊，這個(gè)模塊的描述文件，被稱為package.json。       

通常情況下package.json內(nèi)容出錯(cuò)，會(huì)導(dǎo)致項(xiàng)目出現(xiàn)bug，甚至阻止項(xiàng)目的運(yùn)行。

下面是normalize包的package.json文件：

{
? "name": "medpro",
? "version": "1.0.0",
? "description": "A Vue.js project",
? "author": "",
? "private": true,
? "scripts": {
? ? "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
? ? "start": "npm run dev",
? ? "build": "node build/build.js"
? },
? "dependencies": {
? ? "axios": "^0.27.2",
? ? "element-ui": "^2.15.9",
? ? "qs": "^6.11.0",
? ? "vue": "^2.5.2",
? ? "vue-axios": "^3.4.1",
? ? "vue-router": "^3.0.1",
? ? "vuex": "^3.4.0",
? ? "vuex-along": "^1.2.13"
? },
? "devDependencies": {
? ? "autoprefixer": "^7.1.2",
? ? "babel-core": "^6.22.1",
? ? "babel-helper-vue-jsx-merge-props": "^2.0.3",
? ? "babel-loader": "^7.1.1",
? ? "babel-plugin-syntax-jsx": "^6.18.0",
? ? "babel-plugin-transform-runtime": "^6.22.0",
? ? "babel-plugin-transform-vue-jsx": "^3.5.0",
? ? "babel-preset-env": "^1.3.2",
? ? "babel-preset-stage-2": "^6.22.0",
? ? "chalk": "^2.0.1",
? ? "copy-webpack-plugin": "^4.0.1",
? ? "css-loader": "^0.28.0",
? ? "extract-text-webpack-plugin": "^3.0.0",
? ? "file-loader": "^1.1.4",
? ? "friendly-errors-webpack-plugin": "^1.6.1",
? ? "html-webpack-plugin": "^2.30.1",
? ? "mockjs": "^1.1.0",
? ? "node-notifier": "^5.1.2",
? ? "optimize-css-assets-webpack-plugin": "^3.2.0",
? ? "ora": "^1.2.0",
? ? "portfinder": "^1.0.13",
? ? "postcss-import": "^11.0.0",
? ? "postcss-loader": "^2.0.8",
? ? "postcss-url": "^7.2.1",
? ? "rimraf": "^2.6.0",
? ? "semver": "^5.3.0",
? ? "shelljs": "^0.7.6",
? ? "uglifyjs-webpack-plugin": "^1.1.1",
? ? "url-loader": "^0.5.8",
? ? "vue-loader": "^13.3.0",
? ? "vue-style-loader": "^3.0.1",
? ? "vue-template-compiler": "^2.5.2",
? ? "webpack": "^3.6.0",
? ? "webpack-bundle-analyzer": "^2.9.0",
? ? "webpack-dev-server": "^2.9.1",
? ? "webpack-merge": "^4.1.0"
? },
? "engines": {
? ? "node": ">= 6.0.0",
? ? "npm": ">= 3.0.0"
? },
? "browserslist": [
? ? "> 1%",
? ? "last 2 versions",
? ? "not ie <= 8"
? ]
}

package.json文件屬性說明

上述參數(shù)是極為常見的參數(shù)，另外還可以設(shè)置script、license等等。

除了官方必須的一些參數(shù)外，我們也可以存儲(chǔ)我們自己的關(guān)于模塊的描述信息在package.json

生成package.json文件

我們可以使用NPM生成package.json文件，它可以包含最基本的設(shè)置以及結(jié)果

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (node_modules) lsm                 # 模塊名
version: (1.0.0) 
description: Node.js 測試 # 描述
entry point: (index.js) 
test command: 
git repository:   # Github 地址
keywords: 
author: 
license: (ISC) 
About to write to ……/node_modules/package.json:      # 生成地址
{
  "name": "lsm",
  "version": "1.0.0",
  "description": "Node.js 測試",
  ……
}
Is this ok? (yes) y

這樣就生成了一個(gè)最基本的package.json文件，注意手動(dòng)更改的時(shí)候要完全遵循嚴(yán)格的JSON書寫格式，否則容易出現(xiàn)意想不到的簡單錯(cuò)誤。

版本號(hào)概述

npm模塊的完整的版本號(hào)一般是【主版本 . 次要版本 . 補(bǔ)丁版本】，一般情況下，次要版本號(hào)發(fā)生改變的話，表示程序有重大更新。

（1）使用~表示版本范圍

這里大概可以如此概述：

• ① 補(bǔ)丁版本號(hào)缺失，則允許補(bǔ)丁版本號(hào)升級(jí)；
• ② 次要版本號(hào)+補(bǔ)丁版本號(hào)缺失，則允許次要版本號(hào)+補(bǔ)丁版本號(hào)升級(jí)。

（2）使用^表示版本范圍

這里大概可以如此概述：

• ① 若主版本號(hào)不為0，則允許次要版本號(hào)+補(bǔ)丁版本號(hào)升級(jí)；
• ② 若主版本號(hào)為0，次要版本號(hào)不為0，則允許補(bǔ)丁版本號(hào)升級(jí)；
• ③ 若主版本號(hào)+次要版本號(hào)皆為0，將無法升級(jí)模塊；
• ④ 若主版本不為0，補(bǔ)丁版本缺失（將被視作0），那么將允許次要版本+補(bǔ)丁版本升級(jí)到到最新；
• ⑤ 若主版本為0，補(bǔ)丁版本缺失（將被視作0），那么允許補(bǔ)丁版本升級(jí)到最新；
• ⑥ 若次要版本+補(bǔ)丁版本均缺失，此時(shí)補(bǔ)丁版本,被視作1，那么將允許次要版本+補(bǔ)丁版本升級(jí)到最新。

（3）語義版本號(hào)

使用NPM下載和發(fā)布代碼時(shí)都會(huì)接觸到版本號(hào)。NPM使用語義版本號(hào)來管理代碼，這里簡單介紹一下。

語義版本號(hào)分為X.Y.Z三位，分別代表主版本號(hào)、次版本號(hào)和補(bǔ)丁版本號(hào)。當(dāng)代碼變更時(shí)，版本號(hào)按以下原則更新。

• 如果只是修復(fù)bug，需要更新Z位。
• 如果是新增了功能，但是向下兼容，需要更新Y位。
• 如果有大變動(dòng)，向下不兼容，需要更新X位。

版本號(hào)有了這個(gè)保證后，在申明第三方包依賴時(shí)，除了可依賴于一個(gè)固定版本號(hào)外，還可依賴于某個(gè)范圍的版本號(hào)。例如"argv": "0.0.x"表示依賴于0.0.x系列的最新版argv。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論