npm的使用

npm

1. npm介绍

  • npm是javascript的依赖管理工具管理工具,全称 node package manager
  • npm是随着node一起安装的,不同版本的node对应不同版本的npm
  • 如何检测能否使用npm
    • npm --version

2. npm的命令

  • npm init命令用来初始化某个文件夹为npm管理

    • 输入此命令会出现很多次提示,需要我们来填写内容

        package name      包名
        version          版本
        description      描述
        main             入口文件
        scripts          支持的脚本,默认是一个空的 test
        keywords         关键字,有助于在人们使用 npm search 搜索时发现你的项目
        author           作者
        license:         版权许可证(默认:ISC)
        dependencies     在生产环境中需要用到的依赖
        devDependencies  在开发、测试环境中用到的依赖
      
    • npm init -y使用默认的内容

    • 执行此命令成功后会在当前文件夹生成package.json文件

  • npm install命令,用于下载安装依赖,可简写 npm i

    • npm i 依赖名称
    • npm i 依赖名称@依赖对应的版本号
    • 安装的依赖名称和可使用的版本好可以在www.npmjs.com网站搜索,比如说我们要安装jquery
    • 安装的依赖不加版本号默认下载最新版本
    • 安装依赖成功之后会在本地生成一个node_modules文件夹和package-lock.json

    • npm i 指向此命令可以根据项目里面的package.json记录,自动安装对应的依赖和版本
  • npm uninstall命令,用于卸载安装的依赖,可简写 npm un

    • npm uninstall 依赖名称
    • 卸载的时候不需要加版本号,因为一个项目里面一个依赖只能有一个版本
  • npm update命令用来更新依赖

    • npm update 依赖名称
    • 一般不推荐使用此命令,会直接安装新版本覆盖老版本
  • npm run命令用来指向package.json里面scripts配置的命令

        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
            "dev": "node a.js",
            "start": "node b.js"
        },
    
    • 执行npm run dev就会自动到package.json找到后面的语句 相当于执行了node a.js
    • 针对与某些命令可以省略run,比如start和test之类,直接执行npm start
  • npm cache命令用来管理npm的缓存

    • 每一次npm下载的依赖都会自动缓存,下次如果再次安装相同的依赖,npm会去缓存直接下载,而不会去网上下载
    • 默认缓存的地址一般是C:\Users\Administrator\AppData\Roaming\npm-cache
    • 当安装依赖时出现错误码是-4048需要清除缓存
      • npm cache clean
      • npm cache clean --force
  • npm config命令用来配置npm

    • 上面我们说到npm下载会缓存到C:\Users\Administrator\AppData\Roaming\npm-cache,如果我们不希望它往这个目录缓存,我们可以设置自定义它的缓存目录(但不建议修改)
      • npm config set cache 目录地址
    • 安装的依赖默认是从npm官网仓库下载,官网下载一般比较慢,我们可以手动配置npm的下载源
      • npm config set registry https://registry.npm.taobao.org

3. npm下载源

  • 所谓的下载源就是执行npm i 依赖名的时候下载依赖网站的地址
  • 默认下载会从npm官网,也就是http://registry.npmjs.org网站下载,这个网站在国外,下载速度比较慢
  • 一般我们会切换到国内的下载源,也称之国内的镜像源
    • 镜像源就是国内某些大厂会将npm官网的文件复制一份到自己的服务器,npm官网更新,这边资源也会自动更新,就像照镜子一样
  • 切换的命令我们可以使用上面的npm config set registry https://registry.npm.taobao.org,这样我们就切换到了淘宝的镜像服务器
  • 那么有哪些镜像源可以使用呢?我们要使用一个工具叫做nrm
  • 使用这个工具可以查看可用镜像源有哪些,还可以自由切换镜像源

4. nrm使用

  • nrm使用需要安装,我们在cmd命令行执行以下的代码
    • npm i nrm -g
    • 这个地方多了个-g我们待会解释,这是npm依赖安装的另一种方式
  • 安装成功之后,我们就可在cmd使用nrm命令,记住是nrm,不是npm
    • nrm test 检测可用下载源
  • 我们选择一个延迟比较短的切换过去,比如说淘宝
    • nrm use taobao
  • 切换之后我们再次执行nrm test就可以看到*就在淘宝上面了
  • 有时候我们既要使用原来的npm下载源还要使用淘宝的镜像源,我们可以单独安装一个命令cnpm
    • npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 此后我们使用cnpm install 依赖名就是从淘宝源下载,使用npm install 依赖名就是原来的Npm官网下载

5. npm安装依赖的方式

  • 不同依赖的安装方式决定着我们不同的使用,npm安装依赖的方式主要有以下三种
    1. 全局安装依赖

      • 全局安装一般我们需要把安装的依赖当成一个工具来使用,在cmd命令行中使用,比如说nrm cnpm
      • 全局安装依赖方式
        • npm i 依赖 --global 或者简写 npm i 依赖 -g
        • 安装完成之后我们就可以在命令行使用这个依赖了
        • -g可以放在依赖名前面或者后面写 npm i 依赖 -gnpm i -g 依赖
      • 全局安装的依赖存储的默认位置在C:\Users\Administrator\AppData\Roaming\npm,可以手动设置全局安装的目录
        • npm config set prefix 目录路径
        • 不建议修改,修改之后可能导致安装无法使用
    2. 局部安装依赖

      • 当成开发和调试中的依赖一般我们要导入项目中使用,比如说我们后面会安装一个mysql,我们需要用require的方式导入代码使用,这种我们使用方式不一样,又分为以下两种
      • 局部的依赖安装之后都会在本地文件夹生成一个node_modulespackage-lock.json
      1. 当成开发和调试中依赖安装
        • 安装命令 npm i 依赖 --save-dev or npm i 依赖 -D
        • 这种方式的安装会记录到package.json的devDependencies
        • 打包上线的时候的时候不会将依赖打入到安装包
        • 比如安装的依赖有 gulp webpack这种工具类的只会在开发中用
      2. 当成生产中的依赖安装
        • 安装命令 npm i 依赖 --save or npm i 依赖 -S
          lp webpack`这种工具类的只会在开发中用
      3. 当成生产中的依赖安装
        • 安装命令 npm i 依赖 --save or npm i 依赖 -S
        • 这种方式的安装会记录到package.json的dependencies
相关推荐
小白学大数据1 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_3901617710 分钟前
防抖函数--应用场景及示例
前端·javascript
3345543238 分钟前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test40 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web