zoukankan      html  css  js  c++  java
  • NPM使用方法

    什么是npm

    npm是nodejs的包管理器,在当今工程化前端开发过程中,npm包起着举足轻重的作用。

    安装npm

    作为nodejs的包管理器,npm随着nodejs一起安装的。通常情况下,当我们安装完成nodejs以后,npm也就随之安装了。

    如果要更新npm,可以使用如下命令:

    npm install npm -g
    

    npm镜像

    npm提供了官方的镜像管理仓库: 官方仓库,如果我们要使用某个库文件,可以在这个网站上面进行查找,然后使用npm进行安装。

    由于国内的网络环境,通常我们会设置淘宝的镜像,设置方法:

    npm config set registry https://registry.npm.taobao.org
    
    

    要查看设置了哪些参数,使用命令:

    npm config ls
    

    从中可以看到配置文件的地址:C:UsersAdministrator.npmrc

    使用npm安装包

    初始化配置文件

    在使用npm之前,要先初始化npm的配置文件,使用如下命令:

    npm init
    

    这个时候会出现一个初始化的引导命令行,让你输入项目名称、版本号、作者、协议等,如果你觉得这些输入起来麻烦,可以添加参数来使用默认值:

    npm init --yes
    

    使用以上命令,会在当前目录生成package.json。下面是这个默认配置文件的注释:

    {
      "name": "demo1",      //名称
      "version": "1.0.0",   //版本号
      "description": "",    //描述
      "main": "index.js",   //入口文件
      "scripts": {          //脚本,key-value格式,可以使用 npm run xxx
        "test": "echo "Error: no test specified" && exit 1"
      },
      "keywords": [],       //关键字
      "author": "",         //作者
      "license": "ISC"      //协议
    }
    

    包版本号

    npm包的版本命名格式为: major.minor.patch

    • major: 主版本号,新的架构调整,不兼容老版本
    • minor: 次版本号,新增功能,兼容老版本
    • patch: 修补版本号,修复bug,兼容老版本

    当我们安装一个包之后,可以看到包名的前面有一些符号,例如 ^~等,这些符号决定了当前项目依赖的包的版本号如何选择

    • 没有符号,例如1.2.5,表示必须依赖1.2.5版
    • ~:大概匹配某个版本,如果minor版本号指定了,那么minor版本号不变,而patch版本号任意,如果minor和patch版本号未指定,那么minor和patch版本号任意。

    例如:

    如:~1.1.2,表示>=1.1.2 <1.2.0,可以是1.1.2,1.1.3,1.1.4,.....,1.1.n 
    如:~1.1,表示>=1.1.0 <1.2.0,可以是同上
    如:~1,表示>=1.0.0 <2.0.0,可以是1.0.0,1.0.1,1.0.2,.....,1.0.n,1.1.n,1.2.n,.....,1.n.n
    
    • ^:兼容某个版本,版本号中最左边的非0数字的右侧可以任意,如果缺少某个版本号,则这个版本号的位置可以任意
      例如:
    如:^1.1.2 ,表示>=1.1.2 <2.0.0,可以是1.1.2,1.1.3,.....,1.1.n,1.2.n,.....,1.n.n
    如:^0.2.3 ,表示>=0.2.3 <0.3.0,可以是0.2.3,0.2.4,.....,0.2.n
    如:^0.0,表示 >=0.0.0 <0.1.0,可以是0.0.0,0.0.1,.....,0.0.n
    

    其它的一些写法:

    • >:必须大于某个版本,如:>1.1.2,表示必须大于1.1.2版
    • >=:可大于或等于某个版本,如:>=1.1.2,表示可以等于1.1.2,也可以大于1.1.2版本
    • <:必须小于某个版本 ,如:<1.1.2,表示必须小于1.1.2版本
    • <=:可以小于或等于某个版本,如:<=1.1.2,表示可以等于1.1.2,也可以小于1.1.2版本
    • x-range:x的位置表示任意版本,如:1.2.x,表示可以1.2.0,1.2.1,.....,1.2.n
    • *-range:任意版本,""也表示任意版本,如:*,表示>=0.0.0的任意版本
    • version1 - version2:大于等于version1,小于等于version2,如:1.1.2 - 1.3.1,表示包括1.1.2和1.3.1以及他们件的任意版本
    • range1 || range2:满足range1或者满足range2,可以多个范围,如:<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 ❤️.0.0,表示满足这3个范围的版本都可以

    scripts

    scripts节点下配置的是可以运行的脚本。例如在默认配置中的test脚本,我们可以通过下面的命令来调用:

    npm run test
    

    如果我们要添加其它脚本,可以在scripts节点添加键值对:

    "scripts": {          //脚本,key-value格式,可以使用 npm run xxx
        "test": "echo "Error: no test specified" && exit 1",
        "dir": "dir"    //windows下显示当前目录文件列表
    }
    

    然后使用npm来运行该脚本:

    npm run dir
    

    这里只是为了演示scripts脚本的用法,它的作用是为了减轻我们在开发时的重复工作。再举个例子,例如使用webpack打包,可以使用命令npx webpack --mode=production,如果我们每次都使用完整的命令,会显得很繁琐,此时我们可以定义一个脚本来简化操作:

    "scripts": {          //脚本,key-value格式,可以使用 npm run xxx
        "test": "echo "Error: no test specified" && exit 1",
        "dir": "dir",    //windows下显示当前目录文件列表
        "build": "npx webpack --mode=production"
    }
    

    在我们开发的时候,直接使用npm run build命令即可。

    dependencies 和 devDependencies

    顾名思义,dependencies 是依赖的包,devDependencies 是开发时依赖的包。例如我们项目中用到了jQuery,很显然这是项目运行时需要的,那么在添加包时,使用如下命令进行安装:

    npm install jquery
    

    而对于webpack等在开发时用于构建项目的包,我们仅在开发时用到,项目运行时不会使用,因此需要把它们添加到开发依赖中,添加方法如下:

    npm install webpack --save-dev
    
    # --save-dev 可以简写为 -D,简化后的命令如下:
    npm install webpack -D
    

    package.lock.json

    我们在安装包时,可以看到它的版本依赖,默认是兼容大版本即可。此时会出现一个问题,就是在不同的用户电脑中,初始化的包的版本可能会出现不一样的情况,从而造成未可知的bug。为了解决这个问题(这也是yarn诞生的一个原因),npm在5.0之后引入了package.lock.json文件,用来固定包的版本、包的源地址等信息,保证在不同的用户开发环境中加载的是相同的包。

    当用户使用npm install命令来安装我们的依赖项时,会从package.lock.json文件中进行安装。官方文档:package.lock.json

    安装包

    当我们从别人的源代码初始化安装所有依赖的包时,使用如下命令:

    npm install
    

    当我们为项目添加新的包时,使用如下命令:

    # 安装包
    npm install webpack --save
    
    # 上面命令的参数 --save 为默认选项,可以忽略,因此可以简化为:
    npm install webpack
    
    # 全局安装
    npm install webpack -g
    
    # 安装到开发依赖
    npm install webpack -g --save-dev
    
    # 上面这行命令还可以简写为下面这一行
    npm i webpackage -g -D
    

    安装特定版本的包:

    npm install webpack@5.50.0
    

    从指定的源安装包:

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    2021年9月 北京、西安两地,高薪诚聘 .NET工程师,请私信联系!
    如果认为此文对您有帮助,别忘了支持一下哦!
    声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。转载时请在文章页面明显位置给出原文链接。
  • 相关阅读:
    C# 实现保留两位小数的方法
    ueditor 上传大容量视频报http请求错误的解决方法
    Python3 message提示 AttributeError: module 'tkinter' has no attribute 'messagebox'
    Laravel5 went wrong FatalErrorException in HtmlServiceProvider.php line 36
    安装eclipse中文汉化包后无法打开eclipse
    phpstudy 下开启openssl
    mysql 数据库还原出错ERROR:Unknown command '' mysql中断
    MySql启动提示:The server quit without updating PID file(…)失败
    windows 安装 setuptools
    Nginx 域名转发
  • 原文地址:https://www.cnblogs.com/youring2/p/15188268.html
Copyright © 2011-2022 走看看