博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
NPM使用手册
阅读量:5752 次
发布时间:2019-06-18

本文共 2852 字,大约阅读时间需要 9 分钟。

NPM是什么

在项目开发过程当中,我们常常需要引用他人已经开发好的包,比如React,Webpack, angular等等,而npm就是一个用来管理(安装,查看,更新,卸载...)这些包的工具。你也可以上传你的包,和使用公共的包,可以到查看详细信息。

使用准备

  1. 安装Node

    安装完毕可以node -v 查看版本号

  2. 安装NPM

    命令行:npm install npm --global
    解释:--global为全局安装的意思,整个电脑环境都可以使用,-g是全局安装简写

使用NPM

安装指定包

1. 全局安装

命令行:npm install webpack --global

解释:webpack为你想要安装的包名,--global说明是全局安装此包,全局安装后可以供命令行(command line)使用,用户可以在命令行中直接运行该组件包支持的命令,如下图全局安装webpack后的cmd文件

webpack CLI

2. 局部安装(默认行为)

命令行:npm install webpack

解释:比如你想在一个叫‘mx-npm’的文件夹安装一个包,你可以通过mkdir mx-npm 创建一个叫mx-npm的文件夹,然后cd mx-npm 进入到文件夹,在来执行安装命令行,也可以直接在对应的文件夹内,按住shift,点鼠标右键,点击在此处打开命令窗口,要进入到你要安装的项目文件内来输入命令行

引用方式:可以直接通过require('')的方式引入项目中node_modules目录下的模块,也可以用es6的import,

3. 为什么全局安装后还要本地安装?

详细见

总结:有时候一些神奇的bug,很有可能是你的包的版本装的不对,还是按照package.json来安装比较好,保证不同版本的包之间的相互依赖。

4.安装制定版本

命令行:npm install webpack@2.1.0解释:局部安装webpack其版本号为2.1.0

删除指定包

  1. 全局删除

    命令行:npm uninstall webpack -g
    解释:webpack为包名,-g是全局的缩写

  2. 局部删除

    命令行: npm uninstall webpack

查看

  1. 查看项目安装了哪些包

    命令行:npm list
    图片描述

  2. 查看某个包的信息

    命令行: npm info bootstrap
    图片描述

  3. 查看全局安装的根目录

    命令行: npm root -g

    一般在  \ Users \ 用户名 \ AppData \ Roaming\底下,我已经能记住了

更新

  1. 检查更新

    命令行:npm outdated

  2. 更新限定

    在package.json里面会被限制更新的版本号,见下文

  3. 执行更新

    命令行:npm update

关于package.json

什么是package.json

package.json是项目的配置文件,里面可以包含项目的名字,版本号,项目的描述,git仓库,关键字,作者,依赖的包等等,但是至少要包含项目的名字,版本号,是可以手工创建的,但是也可以用NPM自动创建。

package.json使用好处

分享包的时候可以删除node_modules(这里面放着各种项目使用到的包),然后使用命令行npm install,就会根据package.json里面的内容自动安装包

自动创建package.json

命令行:npm init解释:输入命令行之后会问你几个问题,不一定每个都要回答可以直接回车,然后yes完成创建。

分析与使用package.json

  • 第一次创建后的package.json

{  "name": "simplejan-web",  "version": "1.0.0",  "description": "none",  "repository": "none",  "readme": "README.md",  "main": "index.html",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "UNLICENSED",  "dependencies": {    "bootstrap": "^3.3.6",    "bootstrap-material-design": "^0.5.9",    "snackbarjs": "^1.1.0",    "nouislider": "^6.2.0",    "jquery": "*"  }, "devDependencies":{},}

^这个符号代表的是只能更新版本号第二位数字,改为~可以只能更新第三位,只有*代表更新到最新

  • dependencies与devDependencies

    两者标识的是不同的依赖,dependencies是运行本项目所依赖的包,而devDependencies是用于开发时需要的模块,包括一些用于开发测试的模块

  • 添加dependencies 依赖

    命令行: npm install bootstrap --save

  • 添加devDependencies 依赖

    命令行:npm install webpack --save-dev

"dependencies": {    "bootstrap": "^3.3.6",    "bootstrap-material-design": "^0.5.9",    "jquery": "^1.10.2",    "nouislider": "^6.2.0",    "snackbarjs": "^1.1.0"  },  "devDependencies": {    "webpack": "^1.12.14"  }}
  • 删除的时候对应的package.json配置也删除

    命令行:npm uninstall webpack --save-dev

    解释:区别在于--save-dev 和--save

NPM进阶

npm link

npm link命令是可以将模块安装到全局,这样你自己这个私有的包就可以在全局使用啦,详细用法见

package.json

NPM 脚本 - "scripts"

{  // package.json  "scripts": {    "build": "node index.js"  }}

当执行npm run build的时候,相当于执行了node index.js,好处多多,比如用于项目的自动构建打包等,有一篇详细的文章见

命令行可执行模块 "bin"

//package.json {... "bin": {    "mx": "./mx.js"  }  ...  }

用来执行各个内部命令对应的可执行文件的位置。比如在命令行中执行mx,就会执行mx.js,

这个有什么用?举个例子


参考资料

转载地址:http://rdukx.baihongyu.com/

你可能感兴趣的文章
Chrome教程(二)使用ChromeDevTools命令菜单运行命令
查看>>
bat想要写一个卸载软件的脚本,最后宣布失败[未完待续...]
查看>>
数据结构及算法基础--快速排序(Quick Sort)(二)优化问题
查看>>
你对position的了解到底有多少?
查看>>
随笔2013/2/19
查看>>
Windows Phone的Silverlight Toolkit 安装及其使用
查看>>
20135203齐岳信息安全系统设计基础——实验一实验报告
查看>>
11.11
查看>>
20060218: “人不能无耻到这样的地步”
查看>>
[SpringBoot] - 上线一份项目记录
查看>>
C#环境搭建,以及C#编译器的使用
查看>>
LightOJ 1277 Looking for a Subsequence
查看>>
接水问题(2010年NOIP全国联赛普及组)
查看>>
联系我们 提交需求
查看>>
asp.net web api 跨域,带cookie
查看>>
无论是曾经多么辉煌的公司,对于华尔街来说往往只是一堆数据  中国智能手机市场的普遍疲软,也带来了负面影响。...
查看>>
博客目录
查看>>
第十一章
查看>>
用jquery写自己的form表单验证
查看>>
PostgreSQL10.5 - 创建索引的思考
查看>>