摘要:本文是系列的第一篇,知识很基础,作为一个热身文章,如果各位已经是开发熟练工了,完全可以跳过这篇。系列汇总什么是系列一简介什么是系列二的十八般武艺本文同步发表博客什么是系列一简介
npm是Node.js的包管理工具,它的诞生也极大的促进了前端的发展,在现代前端开发中都离不开npm的身影。
本文是npm系列的第一篇,知识很基础,作为一个热身文章,如果各位已经是开发熟练工了,完全可以跳过这篇。
1. 安装 npmnpm 是基于 Node.js,所以我们需要安装 Node.js,方式有两种:
Node.js 网站
nvm (建议) 具体文章可以搜索下
2. 使用 2.1 如何更新npm// 查看npm版本 npm -v // 更新npm自身 npm install npm@latest -g2.2 安装依赖
在实际使用中我们既安装本地包(项目依赖),也会安装全局包(命令行工具)。
如何管理本地包
可以使用下面的命令来安装一个包:
npm install
移除包可以用指令:
npm uninstall
在项目中安装包时默认会安装到dependencies中,我们可以通过以下参数来控制这个行为:
-P, --save-prod:记录在dependencies中
-D, --save-dev:记录在devDependencies中
-O, --save-optional:记录在optionalDependencies中
--no-save:不会记录在dependencies中
除此之外还有两个额外的参数:
-E, --save-exact:版本号不会按照语义化记录,会显示具体的"1.2.3"
-B, --save-bundle:依赖也会记录在bundleDependencies中
如需从 package.json 文件中删除依赖,需要在命令后添加参数:
npm uninstall --save lodash // 通过--save-dev安装的包,移除的时候也需指定为--save-dev将其卸载 npm uninstall --save-dev webpack
如何安装全局包
全局安装一般是用来安装命令行工具,诸如gulp、http-server,我们只需要在后面加上-g,比如:
npm install -g http-server
有时候我们记不清某个包,想查看所有已安装的包应该用什么命令呢:
// depth代表遍历的深度,如果没有该参数,会把所有包的依赖也显示 npm list -g --depth 02.3 package-lock.json
项目中安装依赖后在自动生成package-lock.json文件,里面包含安装的依赖信息,主要是用来锁定依赖版本,确保团队之间安装依赖时不会出现差异。
3. dependencies前面提到dependencies的概念,那在npm中都有哪些依赖呢?
dependencies 生产环境
devDependencies 开发环境
optionalDependencies 可选依赖
peerDependencies 前置依赖
bundleDependencies 待打包依赖(没找到具体名称,可以看下后面的具体介绍)
3.1 dependencies && devDependencies这两个是我们使用的最多的,也是最需要注意的。
假设我们有一个插件magic-lint,它的作用是在提交commit时检查以及格式化代码,那么里面至少有prettier插件用来美化代码,我们需要确保其他用户安装magic-lint之后能正常使用,那就要把prettier列为dependencies。
另外我们在开发magic-lint过程是属于开发环境,我们会需要jest来测试,普通用户安装时是不需要jest,我们把jest列为devDependencies后就可以避免这样的情况。
如果添加--production标记,或者环境变量NODE_ENV被设置为production, npm就不会安装devDependencies中的模块。3.2 peerDependencies
那什么时候用peerDependencies呢?
假设我们有一个webpack-plugin-god插件,它只是webpack的插件,并不依赖webpack,所以在dependencies或devDependencies中不会写明webpack,但事实上它又是针对特定的webpack版本开发,这个时候我们就可以把webpack写入peerDependencies中。
3.3 optionalDependencies如果有一个包属于可与有无的,我们就可以把它归为optionalDependencies
写代码时我们可以这样使用可选包:
try { var foo = require("foo") var fooVersion = require("foo/package.json").version } catch (er) { foo = null } if ( notGoodFooVersion(fooVersion) ) { foo = null } // .. then later in your program .. if (foo) { foo.doFooThings() }3.4 bundleDependencies
假设我们有一个package.json:
{ "name": "awesome-web-framework", "version": "1.0.0", "bundledDependencies": [ "renderized", "super-streams" ] }
通过npm pack命令我们可以得到文件awesome-web-framework-1.0.0.tgz,里面会包含renderized和super-streams两个依赖。
在项目中执行npm install awesome-web-framework-1.0.0.tgz,结构也会变为:
├── node_modules ├── awesome-web-framework │ └── renderized │ └── super-streams └── xxx4. 预告
下一篇将讲解 npm install,看了之后,希望能够让你惊叹一下:“哇~ 原来还可以这样”,我就心满意足了。
系列汇总什么是npm系列:一、npm简介
什么是npm系列:二、install 的十八般武艺
to be continued
本文同步发表博客: 什么是npm系列:一、npm简介
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106787.html
摘要:安装项目依赖包根据自身习惯的方式,自行选择使用或进行安装依赖包。安装完成会显示部分警报,暂时忽略。如果安装最后显示错误,请自行搜索查询错误信息。 安装项目依赖包 根据自身习惯的方式,自行选择使用 npm 或 yarn 进行安装依赖包。 注意:如果选择 npm 安装,后面的命令都是用 npm 命令,包括 npm start / npm build 等;选择 yarn 安装同样如此。请勿将...
摘要:一简介是一个用于构建交互式界面的直观快速和可组合的框架。的兼容性不支持及其以下版本,因为使用了不能模拟的特性。这是简洁的语法和强劲的性能的基础。的组件一个文件由三部分组成,分别体现为个标签。 一、Vuejs简介 Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces. vue.js...
摘要:如果使用了代表代表,则跳过提问阶段,直接生成一个新的文件。 前言 简介:node的包管理器,它随nodejs一起安装,即你安装了nodejs就可以用npm进行包管理,通过npm可以从npm服务器下载别人上传的第三方库,下载并安装别人上传的命令行程序,上传自己写的第三方库和命令行程序可用npm -v查看npm版本号确定npm是否可用,如果npm版本过低,可以使用npm -install ...
摘要:发现仓库被了很多次,因此下定决心要好好的把代码整理一下,方便大家查看代码以及更加愉快的。虽然这个简介有点短,但是该篇的目的并不在于让大家了解这个矩阵动画,而是想让大家一起来丰富这个仓库。 前段时间,发布了一篇文章:学不动了,来点有趣的吧。发现 github 仓库被 frok 了很多次,因此下定决心要好好的把代码整理一下,方便大家查看代码以及更加愉快的 Pull Request。 简介 ...
阅读 2352·2021-09-30 09:47
阅读 1346·2021-09-28 09:35
阅读 3220·2021-09-22 15:57
阅读 2453·2021-09-22 14:59
阅读 3608·2021-09-07 10:25
阅读 3042·2021-09-03 10:48
阅读 3015·2021-08-26 14:14
阅读 902·2019-08-30 15:55