npm

2020-04-27  本文已影响0人  扶不起的蝌蚪

原文

npm简介

npm 是随同 Node 一起安装的包管理工具,能解决Node 代码部署上的很多问题,常见的场景有以下几种:

安装

安装 Node的时候,会连带一起安装npm

升级

Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Forcenpm install -g npm-windows-upgradenpm-windows-upgrade

npm init

npm init 用来初始化生成一个新的 package.json 文件。它会向用户提问一系列问题,如果你觉得不用修改默认配置,一路回车就可以了。
如果使用了 -f--force)、-y--yes),则跳过提问阶段,直接生成一个新的 package.json 文件。

$ npm init -y

npm set

npm set等于为 npm init设置了默认值,以后执行npm init的时候,package.json的作者姓名、邮件、主页、许可证字段就会自动写入预设的值。这些信息会存放在用户主目录的~/.npmrc文件,使得用户不用每个项目都输入。如果某个项目有不同的设置,可以针对该项目运行 npm config

npm i

安装之前,npm install 会先检查,node_modules 目录之中是否已经存在指定模块。如果存在,就不再重新安装了,即使远程仓库已经有了一个新版本,也是如此。

如果你希望,一个模块不管是否安装过,npm都要强制重新安装,可以使用-f--force参数。

$ npm i <packageName> --force

npm i本地安装

npm i -g全局安装

npm i -S

npm i -D

npm i -p

dependencies 依赖

通过npm i -s安装的依赖会在package.json生成这个包的信息,当我们使用npm install命令的时候, npm 会帮我们下载最新的包。

直接影响用户使用,如果缺少就不能使用的包,比如网络请求要用到的axios

"dependencies": {
    "@riophae/vue-treeselect": "^0.4.0",
    "axios": "^0.19.0",
    "echarts": "^4.4.0",
    "element-ui": "^2.12.0",
    "file-saver": "^2.0.2",
    "highcharts": "^8.0.4",
    "jquery": "^3.4.1",
    "js-cookie": "^2.2.1",
    "moment": "^2.24.0",
    "ol": "^6.2.1",
    "qs": "^6.9.1",
    "url-loader": "^0.5.9",
    "v-calendar": "^1.0.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.1",
    "xlsx": "^0.15.6"
  }

devDependencies 开发依赖

在我们开发的时候会用到的一些包,只是在开发环境中需要用到,通过npm i -d安装,但是在别人引用我们包的时候,不会用到这些内容,放在 devDependencies 的包,在别人引用的时候不会被 npm 下载。
只会在开发环境使用的包,就放在devDependencies,比如调试要用到的日志工具redux-logger,打包要用到的webpack

"devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.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",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.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",
    "koa2-cors": "^2.0.6",
    "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",
    "sass-loader": "^7.0.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "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"
  }

npm ls

npm list以树形结构列出当前项目安装的所有模块,以及它们依赖的模块。

$ npm list
# 加上 global 参数,会列出全局安装的模块
$ npm list -g

# npm list 命令也可以列出单个模块
$ npm list underscore

npm start

npm不仅可以用于模块管理,还可以用于执行脚本。package.json文件有一个 scripts字段,可以用于指定脚本命令,供 npm直接调用。

npm startnpm run start的缩写,npm run start实际上是npm run dev执行的打包运行的脚本

"scripts": {
    "dev": "webpack-dev-server --open chrome --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  }
上一篇下一篇

猜你喜欢

热点阅读