NPM是什么
在项目开发过程当中,我们常常需要引用他人已经开发好的包,比如React,Webpack, angular等等,而npm就是一个用来管理(安装,查看,更新,卸载...)这些包的工具。你也可以上传你的包,和使用公共的包,可以到查看详细信息。
使用准备
-
安装Node
安装完毕可以node -v 查看版本号
安装NPM
命令行:npm install npm --global解释:--global为全局安装的意思,整个电脑环境都可以使用,-g是全局安装简写
使用NPM
安装指定包
1. 全局安装
命令行:npm install webpack --global
解释:webpack为你想要安装的包名,--global说明是全局安装此包,全局安装后可以供命令行(command line)使用,用户可以在命令行中直接运行该组件包支持的命令,如下图全局安装webpack后的cmd文件
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
删除指定包
全局删除
命令行:npm uninstall webpack -g 解释:webpack为包名,-g是全局的缩写局部删除
命令行: npm uninstall webpack
查看
查看项目安装了哪些包
命令行:npm list查看某个包的信息
命令行: npm info bootstrap-
查看全局安装的根目录
命令行:npm root -g
一般在 \ Users \ 用户名 \ AppData \ Roaming\底下,我已经能记住了
更新
检查更新
命令行:npm outdated更新限定
在package.json里面会被限制更新的版本号,见下文执行更新
命令行: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,
这个有什么用?举个例子参考资料