npm包管理工具

Hdmi764287459

于 2023-08-24 19:40:01 发布

阅读量115

点赞数 1

文章标签： npm

本文链接：https://blog.csdn.net/Hdmi764287459/article/details/132481357

版权

npm

包其实就是一些模块组织到一起，放到一个目录中的一个称呼，叫包或者模块都行。Node Package Manager: npm 是一个用来安装和管理Node包和前端包的一个工具

npm 有两层含义：

npm 官方网站
- 提供了一个用来共性或者检索的一个平台
- 一是托管 node 环境或者浏览器环境用的的一些第三方包
是一个命令行管理工具，可以用来下载 npm 网站上托管的包
- CLI: Command Line Interface 命令行窗口
- GUI: 图形化界面

安装 npm

Node 是一个执行环境，Node 可以用来执行 JavaScript 代码，（这里的JS指的是 ECMAScript），npm 基于 node 环境的 API（网络操作API、文件操作API）编写的工具，可以用来下载第三方包到指定的目录中。

必须要安装 node 环境，测试是否有 node 环境：

 node -v

安装node环境的时候，已经自动安装了 npm 命令行工具，不需要单独安装。可以通过 npm -v 测试npm是否可用

npm 基本使用

本地安装

一般是在项目中，安装项目使用的依赖包，例如 underscore、less、jQuery，可以在终端中，切换到项目的根目录，然后执行 npm install 包名，比如：npm install jquerynpm 工具会自动将 jQuery 这个包下载，然后放到 node_modules 目录中。node_modules 目录如果不存在会新建，如果已存在，则直接将下载的包放到该目录中。

 $ npm install [--save] 包名

这行命令跟包说明文件package.json 有千丝万缕的关系

包说明文件：package.json

包说明文件其实就是一个产品的说明书：package.json 文件。该文件一般只存在于项目的根路径下，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、依赖项等信息）。可以通过 npm init [-y] 命令使用向导的形式创建该文件。

该文件中描述了项目的一些元数据，例如 name、version、author 等信息。

其中有一个非常重要的属性，叫做：dependencies，该属性是一个对象，里面保存了当前项目的依赖项，该字段一般不要手动修改，它需要结合 npm install --save 包名 来使用，只要在安装的时候加上 --save 参数就会自动将包依赖项添加到该属性中，很方便。

甚至还可以完全把 node_modules 目录删除掉，只要 package.json 文件还在，就可以执行 npm install 安装包说明文件中的所有的依赖项。执行 npm install 命令的时候，它会自动查询当前目录下的 package.json 文件，然后找到里面的 dependencies 属性，依次下载到 node_modules 目录下。

建议：以后使用 npm 的时候，首先用 npm init -y 初始化一个 package.json，然后使用 npm install 包名 --save

总的来讲，有以下几个步骤，重要组成：

npm init [-y]
main
dependencies
- 当前项目或者说包的依赖项
- npm install 的时候，会自动查找当前目录下的 package.json 文件中的 dependencies 属性
- 然后依次下载

本地安装常用命令

 cd Desktop\code`
 `npm init`
 `cls` 清屏
 `npm install bootstrap --save`
 `npm install --save jquery`
 `npm install

全局安装

全局安装：一般用于安装一些命令行工具（这些工具也是基于Node开发的）全局安装使用 npm install --global 包名（工具名），在任意目录执行该命令都可以。

比如：

 npm i -g less
 npm install -g less

常用命令

npm help 查看 npm 命令列表
npm -l 查看各个命名的简单用法
npm -v 查看 npm 的版本
npm root -g 查看全局包安装目录。
npm init [-y]：初始化一个 package.json 文件
npm info 包名 [字段名]：查看指定模块的 package.json 信息
npm search 包名：该命令用于搜索 npm 仓库
npm list 以树型结构列出当前项目安装的所有模块，以及它们依赖的模块
npm list 包名：列出单个模块
npm list -g 列出全局安装的模块
```
 npm install [--save] 包名[#版本号]
```
- npm install 包名 安装包到当前项目下的 node_modules 目录下
- npm install|i --save|-S 包名 安装包的同时把依赖项保存到包说明文件中
- 本地项目安装：目的是为了辅助你的代码功能开发
```
 npm uninstall [--save] 包名
```
- npm uninstall 包名 删除包，但是如果包说明文件中有依赖项，那么不会删除
- npm uninstall --save 包名 删除包，同时将 package.json 文件中的依赖项也删除
npm install
npm install -g 包名
npm uninstall -g 包名
npm install -g http-server --registry=http://192.168.32.59:7001 设置服务器镜像源地址
npm config
- npm config list 查看 npm 配置项
- npm config set init.author.name $name 使用 npm init 时，默认的 name
- npm config set init.author.email $email 使用 npm init 时，默认的 email
- npm congig set prefix "路径" 改变全局包安装路径
- npm config set registry “镜像路径”
http-server 开启服务器
http-server-o 开启服务器并直接在浏览器中打开

启动一个服务器

 $ npm install -g http-server

然后需要打开文件的目录下，打开终端：输入 http-server，这样启动了默认端口是 8080，http-server -p 6060 指定服务器的端口。

如何将包发布到 npm 网站上并且通过 `npm install --global 包名` 安装

配置原理

npm root -g
模拟该目录下 nrm 下的 cli.js (入口文件) 文件中，在第一行加入了 #!/usr/bin/env node
得到路径：C:\Users\mhq\AppData\Roaming\npm\node_modules
在此路径下新建以需要发布的包的包名命名的文件：比如 mCopy;
将所需要发布的 js 文件放到这个文件下，比如 08_copy.js;
在该文件的上一级目录下，C:\Users\mhq\AppData\Roaming\npm 下，复制一个 nrm.cmd 副本
重名名该副本文件为 mCopy.cmd, 现在这个文件长这样：

 @IF EXIST "%~dp0\node.exe" (
   "%~dp0\node.exe"  "%~dp0\node_modules\nrm\cli.js" %*
 ) ELSE (
   @SETLOCAL
   @SET PATHEXT=%PATHEXT:;.JS;=;%
   node  "%~dp0\node_modules\nrm\cli.js" %*
 )

配置完这一步之后就可以在 cmd 中直接使用 mCopy src des 命令来复制文件了

node 提供了一个更方便的方式自动生成 .cmd 文件以及和需要发布的文件产生关联

现在将原理中介绍的过程产生的文件删除，重新使用 Node 方式配置
在桌面新建 mCopy 文件
win+R –> cmd –> cd Desktop –> cd mCopy
新建一个 .js 的入口文件，在第一行加入了 #!/usr/bin/env node，这叫设绑；
在 package.json 文件中加入 bin 字段，
- bin 字段是一个对象
- 该对象的第一个属性就是执行脚本文件的命令，比如 “mCopy”，用来生成 .cmd 文件
- 该对象的第一个属性的值就是要执行的脚本文件

package.json 文件如下：

 {
   "name": "mcopy",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "bin": {
     "mcopy": "./index.js"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
 }

最后，打开终端，进入当前项目的根路径，执行：
```
 npm link
```
- 执行完该命令之后， node 会自动去全局安装创建路径对应的 .cmd 文件
- 这样就开发了命令行工具
- 如果想卸载掉，使用命令 npm unlink
- 新建一个 .js 文件，将需要发布的包的代码放进去；比如：copy.js

copy.js 文件

 const fs = require('fs');
 // 暴露接口
 module.exports = function (src, des, callback) {
     fs.readFile(src, (err, data) => {
         if (err) {
             return callback(err);
         }
         fs.writeFile(des, data, err => {
             return callback(err);
         });
         callback(null);
     });
 };

index.js 文件

 #!/usr/bin/env node
 const copy = require('./copy');
 const args = process.argv.slice(2);
 console.log(args);
 copy(args[0], args[1], err => {
   if (err) {
     return console.log('Copy Fail');
   }
   console.log('Copy Success');
 });

发布
- 发布之前先去 npmjs.com 上验证一下你的 package.json 中的 name 是否被占用
- 如果被占用，则修改 name
- 注意：改了名字之后就无法卸载。
  - 一种方式是直接删掉
  - 一种方式是把 package.json 文件下的 name 改回原来的然后再使用 npm unlink 卸载
  - 然后把 name 改成线上没有的名字
- 去 www.npmjs.com 官网注册一个账号，或者通过 npm adduser 注册一个账户
- 注意：这里一定要确保使用的镜像源地址是 npm 官方的镜像源
- npm login 登陆
- npm publish 发布
- 支持 README.md 文档
  - 添加文档之后再发布
  - 需要更新 package.json 中的版本号
  - 修改 package.json 下的 "description" 为 “A copy tool of a command line”,`
- npm version patch 更新
- npm install -g hqcopy 全局安装到本地
- npm unpublish 删除

Install 说明文档 README.md

h1 hqcopy

h2 Install

 $ npm install --global mcopy

h3 Usage

 $ mcopy src des

将这个包改造为本地和全局两种形式

作为命令行和项目安装

即：在命令行中执行的是： index.js，而在代码中执行的是： copy.js，因此，有以下操作：

将 package.json 包下的 “main” 改成 “copy.js”
将已上传的 hqcopy 下载到本地项目中，
打开之后发现 package.json 文件中的 main 属性是 “index.js”
当前项目下新建 .js 文件, 然后使用下面代码引入，目前只限错误
因为目前只能当做命令行使用

 const hqcopy = require('hqcopy');

加载机制，首先去当前项目的 node_modules,
找到 hqcopy，
找到 package.json 文件
找到 main 属性，发现是 index.js
应当判断是全局命令行调用，还是代码调用
修改 package.json 文件的 main 属性为 copy.js, 这样，如果是代码调用，默认调用 copy.js文件

 {
   "name": "hqcopy",
   "version": "1.0.2",
   "description": "A copy tool of a command line",
   "main": "copy.js",
   "bin": {
     "mcopy": "./index.js"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
 }

npm version patch
npm publish

新建 test.js 进行测试

npm install --save hqcopy

 const hqcopy = require('hqcopy');
 hqcopy('README.md','a.md', err => {
   if (err) {
     throw err;
   }
   console.log('copy success');
 });

现在的这个包就既可以安装到本地也可以全局安装，安装到本地项目可以使用该包暴露的 API 接口，安装到全局就可以使用该包提供的全局命令工具。

解决 npm 被墙的问题，使用镜像源地址

国内的淘宝：克隆了国外的服务器，跟国外的 npm 每10分钟保持同步一次；

npm install 包名 --registry=https://registry.npm.taobao.org 国内淘宝镜像源地址
```
 npm config set registry=https://registry.npm.taobao.org
```
- 这是将 npm 的下载镜像源地址改为淘宝的 cpnm 镜像源
- 这样执行该命令，以后所有的 install 都会通过指定的地址下载
- 还提供了 cnpm 命令
- ```
 npm install -g cnpm
```
  - 安装了 cnpm 之后，就可以使用 cnmp 命令安装和管理包了
  - cnpm 默认就会走淘宝的 npm 镜像源地址
  - cnpm install -g 包名
  - cnpm install 包名
  - npm 的命令都可以通过 cnpm 来代替
实际上，在用户目录下生成了.npmrc 文件，保存了镜像源地址
还有一个工具，如果在局域网内，局域网的包，这样又需要改镜像源地址：
- 安装和管理多个镜像源地址
- ```
 npm install -g nrm
```
  下载安装
  - nrm 即 nmp registry manager
  - nrm 可以用来管理多个镜像源地址，切换多个镜像源地址
  - nrm 是基于 node 开发的
  - nrm ls 列出所有的镜像源地址
  - nrm current 显示当前使用的镜像源地址
  - nrm use 镜像源名称 切换到指定的镜像源地址
  - nrm add 镜像源名称镜像源地址 添加指定的镜像源地址
  - nrm del 镜像源名称 从本地删除指定的镜像源地址
  - 配置文件都在用户目录下，叫 .nrmrc，直接修改此文件也可配置；

配置 package.json 文件中的 script

在package.json 文件中的 “script” 下添加一条需要使用 npm 命令 来启动项目程序的属性，比如： "start": node ./app.js

这样就可以利用终端，使用命令 npm start 来启动项目。

项目初始化

利用命令自动化管理

npm install
npm install --save-dev brower-sync 直接把开发依赖内置,把安装到项目依赖中.
找到 package.json，在 "scripts" 字段中添加: "start": "hs -o"
找到 package.json，在 "scripts" 字段下添加"dev": "hs -o"，"postinstall": "npm run dev"，然后自动执行。
npm run dev
那么，服务器的开启过程就是： .bin 目录下 hs 执行 node-modules 下的 http-server。

package.json 文件中的配置。

 {
   "script":{
     "prestart": "npm install"
     "start": "hs -o"
     "dev":"hs -o"
     "postinstall":""
   }
 }

另外一种配置 package.json 启动项目的方法

 {
   "scripts": {
     "prestart": "npm install",
     "start": "hs -o",
     "predev": "npm install",
     "dev": "hs -o"
   }
 }