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 命令
安装卸载都可以连续安装和卸载
npm install xxx
安装模块到当前命令行所在目录,安装但不写入package.jsonnpm install xxx -g
利用npm安装全局模块npm install xxx –save
安装并写入package.json的”dependencies”中(项目生产运行时使用,不加–save,默认是安装到此)npm install xxx –save-dev
安装并写入package.json的”devDependencies”中(项目开发运行时使用)npm uninstall xxx
卸载模块npm uninstall xxx -g
卸载全局模块npm install react@16.x --save
安装react版本为16.x~17.0.0之间,不会安装17.0.0