npm使用和常见问题

你那个道上的
314 阅读6分钟 


typora-copy-images-to: npm操作.assets

NPM 使用介绍1.升级npm2.配置镜像仓库（淘宝）3.安装vue.js4.安装vue-router5.安装脚手架6.添加环境变量7.创建vue项目8.运行项目9.生成静态文件10.下载gulp11.下载指定版本的依赖12.--save和--save-dev区别13.卸载依赖14.更新依赖15.Package.json 属性说明16.查看安装信息17.解决npm ERR! Unexpected end of JSON input while parsing near的方法汇总

NPM 使用介绍

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

 npm -v
2.3.0

1.升级npm

npm install npm -g

2.配置镜像仓库（淘宝）

npm config set registry=http://registry.npm.taobao.org

3.安装vue.js

这里的-g是指安装到global全局目录中

npm install vue -g

4.安装vue-router

npm install vue-router -g

5.安装脚手架

npm install vue-cli -g

6.添加环境变量

1.png

7.创建vue项目

注意，vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js 中。

vue init webpack vue01

3.png

进入项目vue01，添加项目所需依赖

2.png

8.运行项目

npm run dev

9.生成静态文件

npm run build

10.下载gulp

npm install gulp --save-dev

11.下载指定版本的依赖

npm install 依赖名称@版本号

npm install echarts@5.1.2

12.--save和--save-dev区别

一句话:--save-dev是你开发时依赖的东西，--save是发布后还依赖的东西.

13.卸载依赖

npm uninstall echarts

14.更新依赖

npm update echarts

15.Package.json 属性说明

  • name - 包名。
  • version - 包的版本号。
  • description - 包的描述。
  • homepage - 包的官网 url 。
  • author - 包的作者姓名。
  • contributors - 包的其他贡献者姓名。
  • dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
  • repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
  • main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
  • keywords - 关键字
{
  "name": "basicFramework",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "serve:dev": "vue-cli-service serve --mode development",
    "serve:tests": "vue-cli-service serve --mode tests",
    "build:development": "vue-cli-service build  --mode development",
    "build:tests": "vue-cli-service build  --mode tests",
    "build:prod": "vue-cli-service build  --mode production",
    "lint": "vue-cli-service lint --fix"
  },
  "dependencies": {
    "ant-design-vue": "^1.6.5",
    "axios": "^0.20.0",
    "babel-plugin-equire": "^1.1.1",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "compression-webpack-plugin": "5.0.0",
    "core-js": "^3.6.5",
    "crypto-js": "^4.0.0",
    "echarts": "^5.1.2",
    "html2canvas": "^1.0.0-rc.7",
    "jspdf": "^2.3.1",
    "lodash": "^4.17.20",
    "mockjs2": "^1.0.8",
    "normalize.css": "^8.0.1",
    "nprogress": "^0.2.0",
    "qs": "^6.10.1",
    "script-ext-html-webpack-plugin": "^2.1.4",
    "store": "^2.0.12",
    "store2": "^2.12.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vue-svg-component-runtime": "^1.0.1",
    "vue-svg-icon-loader": "^2.1.1",
    "vuex": "^3.4.0",
    "webpack-bundle-analyzer": "^4.3.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.13.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "filemanager-webpack-plugin": "^2.0.5",
    "html-webpack-inline-plugin": "^0.0.4",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "style-resources-loader": "^1.3.3",
    "terser-webpack-plugin": "^5.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.0.0"
  }
}
​

16.查看安装信息

你可以使用以下命令来查看所有全局安装的模块：

$ npm list -g
​
├─┬ cnpm@4.3.2
│ ├── auto-correct@1.0.0
│ ├── bagpipe@0.3.5
│ ├── colors@1.1.2
│ ├─┬ commander@2.9.0
│ │ └── graceful-readlink@1.0.1
│ ├─┬ cross-spawn@0.2.9
│ │ └── lru-cache@2.7.3
……

如果要查看某个模块的版本号，可以使用命令如下：

$ npm list grunt

projectName@projectVersion /path/to/project/folder
└── grunt@0.4.1

17.解决npm ERR! Unexpected end of JSON input while parsing near的方法汇总

1.删掉package.lock.json

2.清除cache

npm cache clean --force

3.进入下面这个文件夹清除cache 路径：C:/Users/PC/AppData/Roaming/npm-cache 执行：

npm cache clean --force

4.不要用淘宝镜像。

npm set registry https://registry.npmjs.org/

18.解决EPERM: operation not permitted, unlink

详细日志

34713 verbose node v10.14.1
34714 verbose npm  v6.4.1
34715 error path E:\SVNWork\S_山西工建二期\frontend\blsp\node_modules\.staging\echarts-38b4b740\dist\echarts.common.js
34716 error code EPERM
34717 error errno -4048
34718 error syscall unlink
34719 error Error: EPERM: operation not permitted, unlink 'E:\SVNWork\S_山西工建二期\frontend\blsp\node_modules\.staging\echarts-38b4b740\dist\echarts.common.js'
34719 error  { [Error: EPERM: operation not permitted, unlink 'E:\SVNWork\S_山西工建二期\frontend\blsp\node_modules\.staging\echarts-38b4b740\dist\echarts.common.js']
34719 error   cause:
34719 error    { Error: EPERM: operation not permitted, unlink 'E:\SVNWork\S_山西工建二期\frontend\blsp\node_modules\.staging\echarts-38b4b740\dist\echarts.common.js'
34719 error      errno: -4048,
34719 error      code: 'EPERM',
34719 error      syscall: 'unlink',
34719 error      path:
34719 error       'E:\\SVNWork\\S_山西工建二期\\frontend\\blsp\\node_modules\\.staging\\echarts-38b4b740\\dist\\echarts.common.js' },
34719 error   stack:
34719 error    'Error: EPERM: operation not permitted, unlink \'E:\\SVNWork\\S_山西工建二期\\frontend\\blsp\\node_modules\\.staging\\echarts-38b4b740\\dist\\echarts.common.js\'',
34719 error   errno: -4048,
34719 error   code: 'EPERM',
34719 error   syscall: 'unlink',
34719 error   path:
34719 error    'E:\\SVNWork\\S_山西工建二期\\frontend\\blsp\\node_modules\\.staging\\echarts-38b4b740\\dist\\echarts.common.js',
34719 error   parent: 'echarts-modules' }
34720 error The operation was rejected by your operating system.
34720 error It's possible that the file was already in use (by a text editor or antivirus),
34720 error or that you lack permissions to access it.
34720 error
34720 error If you believe this might be a permissions issue, please double-check the
34720 error permissions of the file and its containing directories, or try running
34720 error the command again as root/Administrator (though this is not recommended).
34721 verbose exit [ -4048, true ]

原因：
其实这个错误出现的原因就是网络不稳定，导致npm包下载不完整或者出错导致的。什么，你家里100M光纤网速飞起？但服务器是国外的，该慢的时候还是得慢。 而一次出错之后，一般人都会再次npm install ，而npm install命令并不会主动清除上次安装的包，而你上次安装的包又不完整，包与包之间又有依赖关系，结果自然就会出错。
解决办法：
1.删除node_modules目录
2.使用管理员打开 PowerShell或者cmd
3.使用npm cache clean --force命令清除缓存
4.重新npm install

avatar
文章
阅读
粉丝