npm的基本操作

简介: npm的基本操作

NPM

npm的全程是node package manger 是node模块管理,根据npm我们可以快速安装和卸载所需要的资源文件

npm的使用

现下载node,下载node的稳定版
安装过后通过cmd或终端输入命令
npm -v
node -v
查看是否安装,安装后会显示版本号

基于npm进行模块管理

https://www.npmjs.com
基于npm是从npmjs.com平台上下载安装的
安装模块是把模块安装到当前项目下的node_modules文件夹下
安装node模块命令
npm install xxx 或 npm i xxx 
全局安装
npm install xxx -g 或 npm i xxx -g
可以连续安装
npm i jquery less bootstrap
//什么情况下会把模块安装到全局
//可以使用命令对任何项目进行操作的情况下安装到全局,可以通过npm root -g查看全局模块安装到那里,因为在安装目录下生成了xxx.cmd
//文件,所以才能够使用xxx的命令进行操作
// 安装在本地项目中的模块=>可以在项目中导入进来使用但是默认不能基于命令来操作(因为没有cmd文件),但是可以基于package.json
//里面的scripts,配置一些npm可以执行命令 ,配置后通过 npm run xxx运行
安装指定版本号
npm install xxx@版本号 或 npm i xxx@版本号  
卸载node模块命令
npm uninstall xxx
全局卸载
npm uninstall xxx -g 
查看当前模块都有那些版本(输出到指定JSON文件中)
npm view xxx versions > xxx.version.json
初始化当前项目的配置依赖清单
npm init -y (创建项目的文件夹不能出现中文或大写字符或特殊符号)
把模块保存在清单生产依赖中
npm i xxx --save
把模块保存在清单开发依赖中
npm i xxx --save-dev
安装配置环境,按照清单安装所需的模块
npm i或npm install
查看全局安装模块的目录
npm root -g
//里面的cmd文件都是全局命令文件

npm ^和~以及*的区别

~ 会匹配最近的小版本依赖包,比如~1.2.3会匹配所有1.2.x版本,但是不包括1.3.0
^ 会匹配最新的大版本依赖包,比如^1.2.3会匹配所有1.x.x的包,包括1.3.0,但是不包括2.0.0
* 这意味着安装最新版本的依赖包

推荐使用~,只会修复版本的bug,稳定,使用^ 或者*,有的版本更新后会引起一些问题

当主版本号/次版本号/修订版本号为X or x or *时,那么update或install是会下载该分支最新的版本号
1.x 表示的更新范围为>=1.0.0&&< 2.0.0
1.2.x 表示的更新范围为>=1.2.0&&< 1.3.0

package.json文件

//package.json是整个项目的配置清单
通过 git init -y 创建一个package.json文件,创建项目的文件夹不能出现中文或大写字符或特殊符号
1.name:项目/模块名称,长度必须小于等于214个字符,不能以"."(点)或者"_"(下划线)开头,不能包含大写字母。
2.version:项目版本。
3.author:项目开发者,它的值是你在https://npmjs.org网站的有效账户名,遵循“账户名<邮件>”的规则,
例如:zhangsan zhangsan@163.com。
4.description:项目描述,是一个字符串。它可以帮助人们在使用npm search时找到这个包。
5.keywords:项目关键字,是一个字符串数组。它可以帮助人们在使用npm search时找到这个包。
6.private:是否私有,设置为 true 时,npm 拒绝发布。
7.license:软件授权条款,让用户知道他们的使用权利和限制。
8.bugs:bug 提交地址。
9.contributors:项目贡献者 。
10.repository:项目仓库地址。
11.homepage:项目包的官网 URL。
12.dependencies:生产环境下,项目运行所需依赖。(开发和项目部署的时候都需要)
13.devDependencies:开发环境下,项目所需依赖。(只有开发的时候需要,项目部署时不需要)
14.scripts:执行 npm 脚本命令简写,比如 “start”: “react-scripts start”, 执行 npm start 就是运行 “react-scripts start”。
'scripts':{ 'less':'lessc 1.less 1.min.css -x'} =>打开终端 npm run less
15.bin:内部命令对应的可执行文件的路径(配置本地可执行命令)。
16.main:项目默认执行文件,比如 require(‘webpack’);就会默认加载 lib 目录下的 webpack.js 文件,
如果没有设置,则默认加载项目跟目录下的 index.js 文件。
17.module:是以 ES Module(也就是 ES6)模块化方式进行加载,因为早期没有 ES6 模块化方案时,都是遵循 CommonJS 规范,
而 CommonJS 规范的包是以 main 的方式表示入口文件的,为了区分就新增了 module 方式,但是 ES6 模块化方案效率更高,
所以会优先查看是否有 module 字段,没有才使用 main 字段。
18.eslintConfig:EsLint 检查文件配置,自动读取验证。
19.engines:项目运行的平台。
20.browserslist:供浏览器使用的版本列表。
21.style:供浏览器使用时,样式文件所在的位置;样式文件打包工具parcelify,通过它知道样式文件的打包位置。
22.files:被项目包含的文件名数组。

项目流程

//第一步:创建项目文件夹
//第二步:创建空仓库(基于git clone进行克隆)便于管理代码
//第三步:通过npm init -y进行初始化配置清单package.json
//第四步:安装所需模块可以连续安装 npm i xxx xxx xxx
//第五步:正常开发
//第六步:开发中可能需要在本地配置一些命令去完成一些功能,需要使用的时候,使用npm run xxx
//第七步:开发中我们需要基于git把文件进行管理:生成对应的历史版本
//提交到暂存区,历史区,远程仓库的时候,项目中很多文件是无需处理提交的
//如:node_modules(node管理包),.idea(开发工具默认生成的文件)
//第八步:不需要提交的我们生成一个.gitignore(忽略文件),没有文件名只有后缀名,是一个忽略文件(必须通过编译器创建)
//第九步:如果clone克隆下来的话,确保有package.json文件进行npm i进行跑环境
//package.json里面存储有我们所有下载过的包,npm i可以把我们配置清单的所有配置项进行配置下载安装,具体安装那个版本
//以我们package.json标注的版本为主,每次npm都会按照配置清单进行跑环境
//第十步:由于每次git提交的时候,我们都不去提交node_modules,所以团队协作开发中,我们每当拉下来程序后,都需要跑环境:
//执行npm i ,按照项目中的package.json中的依赖项信息,把缺失的模块都安装一遍

.gitignore(git提交忽略文件)

//不需要提交到git仓库的,我们生成一个.gitignore(忽略文件),没有文件名只有后缀名,是一个忽略文件
//必须通过编译器创建
//#注释的意思
//直接在.gitignore里面写文件夹即可,必须跟在项目的根目录下
//.gitignore代码
#dependencies
node_modules
#testing
/coverage
#production
/bulid
#misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
#webStorm
.idea

如何让npm安装速度变快

安装yarn进行操作
npm i yarn -g
以后还是用都是把npm切换成yarn即可(yarn不能全局安装node模块)
第二种基于nrm切换镜像源
npm i nrm -g
//查看当前源
nrm ls
//切源到淘宝
nrm use taobao
第二种可以切换npm源,切换成淘宝镜像源(博文上有)

npm的-D和-S的区别

npm install xxx -save-dev 简写为npm install xxx -D,自动把模块和版本号添加到package.json文件中的devdependencies中(开发用到的包)

npm install xxx -save简写为npm install name -S ,会把自动把模块和版本号添加到package.json文件中dependencies中(生产用到的包),不加-save或者-S也会直接安装到此处

npm 命令

安装卸载都可以连续安装和卸载

  1. npm install xxx 安装模块到当前命令行所在目录,安装但不写入package.json
  2. npm install xxx -g 利用npm安装全局模块
  3. npm install xxx –save 安装并写入package.json的”dependencies”中(项目生产运行时使用,不加–save,默认是安装到此)
  4. npm install xxx –save-dev 安装并写入package.json的”devDependencies”中(项目开发运行时使用)
  5. npm uninstall xxx 卸载模块
  6. npm uninstall xxx -g 卸载全局模块
  7. npm install react@16.x --save 安装react版本为16.x~17.0.0之间,不会安装17.0.0
相关文章
|
7月前
|
存储 开发工具 数据安全/隐私保护
NPM 常用命令(四)
NPM 常用命令(四)
|
7月前
|
存储 缓存 前端开发
NPM 常用命令(七)
NPM 常用命令(七)
|
7月前
|
JSON Shell 开发工具
NPM 常用命令(六)
NPM 常用命令(六)
|
7月前
|
存储 Shell 开发工具
NPM 常用命令(八)
NPM 常用命令(八)
|
7月前
|
JSON 开发工具 数据安全/隐私保护
NPM 常用命令(十一)
NPM 常用命令(十一)
|
7月前
|
存储 缓存 JavaScript
NPM 常用命令(十二)
NPM 常用命令(十二)
|
7月前
|
JSON 开发工具 数据安全/隐私保护
NPM 常用命令(九)
NPM 常用命令(九)
|
7月前
|
JSON 前端开发 JavaScript
NPM 常用命令(十)
NPM 常用命令(十)
|
7月前
|
JSON 安全 开发工具
NPM 常用命令(一)
NPM 常用命令(一)
|
7月前
|
缓存 JavaScript Shell
NPM 常用命令(五)
NPM 常用命令(五)