Node为前端工程化,模块化注入了新鲜的血液,而npm是其中关键的一环。对于刚接触这些新颖概念的我,此文作为学习笔记加强记忆帮助使用。
目前最新版本的Node环境已经集成了npm,下载Node便可使用了。
package.json
:是一个用于包的依赖管理文件
package.json
可以通过npm init
命令生成。
执行命令后,它会像用户提问一系列问题,用于初始配置文件,当然即使你跳过此步骤,后续也可以继续修改。
愈要跳过此步骤:npm init -y
键入yes
确认,生成json文件。
{
"name": "studynpm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
在package.json
中,有一些属性是必须写入的。即最少配置项
-
name
- 全部为小写字母
- 一个单词,无空格
- 允许半角破折号和下划线
-
version
- 遵循语义化版本控制规范(SemVer)
- 格式为:x.y.z
- z:bug修复,打补丁
- y:新的功能,向下兼容。
- x:新的版本发布,不向下兼容。
你可以通过set
命令来提前设置好一些配置项。如:
npm set init.author.email "[email protected]"
npm set init.author.name "ag_dubs"
npm set init.license "MIT"
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 - 关键字(便于检索)
接下来演示一些基本用法。
在前端上古时期,没有包、模块等概念的时候,要在浏览器中使用jQuery最常见的做法就是,找到官网——复制or下载源码——贴入src
这样的操作了。
那么,在node中,我们如何使用jQuery?
首先cd到项目目录,生成package.json
文件,随后观察这个json文件,注意发现有什么改变。
{
"name": "studynpm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
CLI中键入npm install jquery
执行这条命令的时候,终端会链接到npm服务器,寻找是否存在这个名字的包。如果不存在,会返回error。
正确输入package name后,自动下载到当前目录下的node_modules
目录中。
所有通过npm安装的包都会存放在当前项目node_modules
目录下。
有一些包和工具必须全局安装(比如eslint和gulp)才能方便使用,这里要用到全局安装命令。
npm install -global
npm install -g
这样就会将包安装在根目录下。
那么现在,想要在HTML页面中引入jQuery,我们可以:
Document
浏览器打开:
那么问题来了,目录下文件那么多,我们怎么知道是/jquery/dist/jquery.js
呢?
这些都写在了包自带的package.json中。
main属性就指定了这个包的入口文件,通俗的说,如果你想用它,从“这里”开始。
好了,现在假设你离职了,后续的人需要接管你的代码,那么他怎么知道你这个项目依赖什么包呢?靠的也是package.json。
现在回到install之前的package.json文件中,发现到了什么变化吗?
{
"name": "studynpm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1",
"vue": "^2.5.17"
}
}
多了一个属性,dependencies
,翻译过来:依赖,顾名思义,这个属性就是管理你当前包的依赖的。
并且详细到,依赖的包的版本号也会纪录。
现在,我们手动删除node_modules
目录。
现在想回到之前的开发环境怎么办?
既然有package.json,直接npm insatll
。
又回来了,这样,别人需要知道你的依赖,直接发package.json文件给他就好了。
怎么知道一个包是否存在呢?
进入npm官网查询。
或者使用
npm search
npm search
npm search
命令用于搜索npm仓库,它后面可以跟字符串,也可以跟正则表达式。
以往的npm,将一个包保存入dependencies属性需要命令:npm install
,也就是说,你要明确指定save in dependencies,它才会将此包作为依赖放入dependencies属性内。
新版本npm中,通过npm install安装的包都会自动添加进入dependencies,这是默认的。
如何更新依赖?
npm update
// 升级当前项目的指定模块
npm update [package name]
//升级全局安装的模块
npm update -global [package name]
它会先到远程仓库查询最新版本,然后查询本地版本。如果本地版本不存在,或者远程版本较新,就会安装。
使用-s
或--save
参数,可以在安装的时候更新package.json里面模块的版本号。
// 更新之前的package.json
dependencies: {
package1: "^1.1.1"
}
// 更新之后的package.json
dependencies: {
package1: "^1.2.2"
}
如果需要指定安装版本,可以在package name后@版本号
。
npm install [email protected]
当然,更新之后,dependencies内的版本号也会改变。
如何卸载一个包呢?
本地卸载:npm uninstall
同时,package.json的dependencies属性也会删除此依赖。当然,也可以手动删除它。
npm uninstall --save vue
全局卸载:npm uninstall -g
有时候,当我们开发一个项目时,一些包只是作为开发依赖,并不是项目必须的,比如一些测试工具,不会在生产环境下运行。
那么就涉及到devDependencies项了。
devDependencies指定项目开发所需要的模块。
{
"name": "studynpm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1"
},
"devDependencies": {
"webpack": "^4.19.0"
}
}
package.json —— bin字段
bin字段用来指定各个内部命令对应的可执行文件的位置。
"bin": {
"start": "./bin/start.js"
}
上面代码指定,start
命令对应的可执行文件为bin字目录下的start.js文件,node会寻找这个文件
一些常用命令
npm update
:更新node模块
npm rebuild
:用于更改包内容后进行重建
npm view
:查看包的依赖关系
npm view
:查看包的源文件地址
npm view
:查看包所依赖的Node的版本
npm outdated
:检查包是否已经过时,此命令会列出所有已经过时的包,可以及时进行包的更新
npm update moduleName
:更新node模块