02-NPM(必学) - 图1

NPM（重点）

介绍

npm（node package manage）node 包 管理器。管理node包的工具。
包是什么？包就是模块。（包约等于模块，一个包可以包括一个或多个模块）

  • 包可以理解为模块
  • 管理node包的工具，就是 管理模块的工具。所以npm是管理模块的工具
  • 内置、自定义模块无需管理，这里的模块指的是第三方模块
  • 结论：npm 是 管理(下载、卸载、发布….)第三方模块的工具

npm这个工具，在安装 node 的时候，就已经安装到你的计算机中了。
命令行中执行： npm -v ，如果看到版本号，说明安装成功了。

npm 是 管理（下载、卸载、发布）第三方模块的工具。

什么是第三方模块

非node自带的模块。也不是自定义的模块。
是别人写的模块，然后发布到npm网站，我们可以使用npm工具来下载安装别人写的模块。
第三方模块，都是在node核心模块的基础之上，封装了一下，实现了很多非常方便快速简洁的方法。
目前，npm网站收录了超过 195 万个第三方模块。

如果你想实现一个功能。那么请搜索第三方模块，没有做不到的事情，只有你搜不到。 不用担心学不完的问题，常用的包不超过100个。

npm的作用

npm的作用是：管理node模块的工具。

  • 下载并安装第三方的模块
  • 卸载第三方模块
  • 发布模块
  • 删除已发布的模块
  • ….

    npm 就是一个管理（下载安装、卸载…）第三方模块的工具

本地模块

初始化

安装本地模块，需要使用npm工具初始化。

  1. npm init -y
  2. # 或
  3. npm init
  4. # 然后一路回车

初始化之后，会在项目目录中生成 package.json 的文件。
注意事项：

  • package name 默认使用当前文件夹 当做 包的名字
  • package name 不能有中文
  • package name 不能有特殊符号
  • package name 不能和需要安装的第三方模块同名

总结：

  • 代码文件夹没有中文、没有特殊符号，那么 **npm init -y**
  • 代码文件夹有中文或特殊符号，那么 **npm init** ，回车后，修改 package name，然后再一路回车

    安装卸载第三方模块的命令

    初始化之后，就可以在当前文件夹中安装第三方模块了
    1. 建议在安装第三方模块之前，先执行如下命令。
    2. 下面的命令只需要执行一次即可（不管以后重启vscode还是重启电脑，都不需要执行第二次）
    3. npm config set registry https://registry.npm.taobao.org
    下载安装第三方模块 ```bash

    正常的下载安装

    npm install 模块名

简写install为i

npm i 模块名

一次性安装多个模块

npm i 模块名 模块名 模块名

指定版本安装

npm i 模块名@版本号 npm i echarts@5.1.2

安装项目依赖

老版本node需要加 —save，作用是把下载的包记录到依赖中

npm i dayjs —save ============ npm i dayjs -S

诸如webpack这样的包，只在开发阶段使用；项目做完不需要webpack了

这样的包，可以安装到开发依赖中，做区分

npm i webpack —save-dev ============= npm i webpack -D

把项目所有的依赖项都安装好，直接npm i可以把项目中所有依赖包全都安装好

npm i

  1. 卸载模块
  2. ```bash
  3. npm uninstall 模块名
  4. npm un 模块名
  5. npm un 模块名 模块名 模块名

上课可以这些包来练习： jquery、mysql、moment、cors、express、echarts、axios、form-value

关于本地模块的说明

  • 下载安装的模块，存放在当前文件夹的 node_modules 文件夹中
  • 同时还会生成一个记录下载的文件 package-lock.json（不重要、知道有它即可）
  • 并且，我们下载的包名、版本会记录到 **package.json**中
  • 下载的模块，在哪里可以使用
    • 在当前文件夹
    • 在当前文件夹的子文件夹
    • 在当前文件夹的子文件夹的子文件夹
    • ……
    • 翻过来讲，当查找一个模块的时候，会在当前文件夹的 node_modules 文件夹查找，如果找不到，则去上层文件夹的node_modules文件夹中查找，…..依次类推。

      重要：代码文件夹不能有中文；代码文件夹不能和模块名同名。

总结：

  • 下载的包有哪些，可以查看 package.json

  • 下载的包，只能在当前代码文件夹，及其后代文件夹中使用

    怎样使用第三方模块

  • 和使用内置模块一样，需要使用 require 加载模块

  • 调用模块提供的方法完成工作
  • 不用担心不会用，好的第三方模块都会用使用文档或者官方网站的。

  • 有些模块没有官网，去 github 查找模块的使用文档，或者百度。

    演示 dayjs 模块 的使用

  • dayjs 和 moment 都是时间日期处理模块，功能相似

  • dayjs 体积更小

https://dayjs.fenxianglu.cn/

// dayjs 是一个专门处理时间日期的模块
// 使用模块之前，必须加载
const dayjs = require('dayjs');
// 将当前时间，转成 “年-月-日 时:分:秒” 的格式
dayjs().format("YYYY-MM-DD HH:mm:ss")
// 将一个其他时间格式，转成 “年-月-日 时:分:秒” 的格式
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss');   // 2011-10-17 00:17:56

总结：

  1. npm init （如果已经初始化过，则不需要重复初始化）
  2. npm i dayjs （安装模块）
  3. 代码中导入模块 const dayjs = require('dayjs')
  4. 使用 console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'))

    package.json文件

    在初始化之后，会生成一个 package.json 文件

  • 创建 package.json

    npm init 
npm init -y

  • dependencies 依赖(复数)

    • dependencies指定了当前项目所依赖（需要）的包，可以使用 **npm install** 可以安装所有的依赖
    • 使用 npm install 模块 安装模块时，会将该模块记录到 dependencies 中，表示这是项目必须的模块。
    • 使用 npm install 模块 -D 安装模块时，会将该模块记录到 devDependencies 中，它表示项目不需要这个模块，但是开发阶段需要这个模块（进行测试、打包等等）

  • scriptsscripts指定了运行脚本命令的 npm 命令行缩写，比如start指定了运行npm run start时，所要执行的命令。

    • 下面的代码中，a 表示 git init 命令。执行命令时，使用 npm run a ，相当于执行了 git init
    • 下面的代码中，start 表示 node app.js 命令，执行命令时，使用 npm start 即可，相当于执行了 node app.js
      "scripts": {
"a": "git init",
"start": "node app.js",
"t": "dir c:\\"
}

  • 运行 scripts

    npm run a
npm run start
# 只有 start 可以简化调用
npm start

    require的加载机制

  1. 判断缓存中有没有，如果有，使用缓存中的内容
  2. 缓存中没有，那么表示第一次加载，加载完会缓存
  3. 判断模块名有没有带路径（./）
  4. 模块名中有路径，加载自定义模块（自己写的文件）const xx = require('./xx')
    1. 优先加载同名文件，加载一个叫做 xx 的文件
    2. 再次加载js文件，加载 xx.js 文件
    3. 再次加载json文件，加载 xx.json 文件
    4. 如果上述文件都没有，则报错 “Cannot find module ‘./xx’”
  5. 模块名没有路径，优先加载核心模块，如果没有核心模块，则加载第三方模块
  6. 加载第三方模块的查找方式
    1. 优先在当前文件夹的node_modules里面查找第三方模块
    2. 在当前文件夹的上级目录的node_modules里面查找第三方模块
    3. 继续向上层文件夹查找第三方模块
    4. ………

      全局模块

      和本地模块的差异

  • 全局安装的模块，不能通过 require() 加载使用。

  • 全局安装的模块，一般都是命令或者工具。

    安装卸载命令

  • 安装命令（多一个 -g）

    npm i 模块名 -g
# 或
npm i -g 模块名
### mac 系统如果安装不上，使用下面的命令提高权限
sudo npm i -g 模块名  # 执行命令后，会让你输入开机密码，输入密码的时候是不显示的

  • 卸载命令（也是多一个 -g）

    npm un 模块名 -g

  • 全局安装的模块，在系统盘（C盘）

    • 通过命令 npm root -g 可以查看全局安装路径

      全局安装nrm

      nrm 是作用是切换镜像源。
      02-NPM(必学) - 图2
      全局安装
      npm i -g nrm   （mac系统前面加 sudo）
      使用nrm
      nrm ls    --- 查看全部可用的镜像源
nrm test  --- 查看可用的镜像源并测试速度
nrm use taobao  ---- 切换到淘宝镜像
nrm use npm  ---- 切换到npm主站

      第一次运行报错及解决

  • 运行 nrm ls 或者 nrm use taobao 等命令，如果报错如下：
    “无法加载文件 C:………………….，因为在此系统上禁止运行脚本。…………….”

  • 解决办法是：
    • 管理员方式，打开命令行（powershell）窗口
    • 执行 set-ExecutionPolicy RemoteSigned;
    • 在出现的选项中，输入 A，回车。即可。
  • 如果报错如下
    “无法将 nrm 识别为 cmdlet、函数、脚本文件或可运行程序的名称。xxxxxxxxxxx”
  • 解决办法，重启vscode、重启终端，win7可能要重启电脑。

    开发属于自己的包

    规范的包结构

    在清楚了包的概念、以及如何下载和使用包之后，接下来，我们深入了解一下包的内部结构。
    📂 - sy123
      📃 - package.json  （package.json包的配置文件，不要自己创建，应该初始化得来）
      📃 - index.js      （入口文件）
      📃 - README.md     （说明文档）
    一个规范的包结构，需要符合以下 3 点要求:
  1. 包必须以单独的目录而存在
  2. 包的顶级目录下要必须包含 package.json 这个包管理配置文件
  3. package.json 中必须包含 name，version，main 这三个属性，分别代表包的名字、版本号、包的入口。
    • name 包的名字，我们使用 require()加载模块的时候，使用的就是这个名字
    • version 版本，1.2.18
    • main 入口文件。默认是index.js 。如果不是，需要使用main指定

注意:以上 3 点要求是一个规范的包结构必须遵守的格式，关于更多的约束，可以参考如下网址:
https://yarnpkg.com/zh-Hans/docs/package-json

开发属于自己的包

  • 初始化 package.json
    注意，JSON文件不能有注释，下面加注释，是为了理解。

    {
"name": "heima-147",  // 包（模块）的名字，不能和别人已发布的包重名
"version": "1.0.0",
"description": "This is a package by Laotang",
"main": "index.js", // 别人加载我们的模块用，require加载的就是这里指定的文件
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [ // 在npm网站中，通过关键字可以搜索到我们的模块，按情况设置
  "laotang",
  "itcast",
  "test"
],
"author": "Laotang", // 作者
"license": "ISC" // 开源协议
}

    关于更多 license 许可协议相关的内容，可参考 https://www.jianshu.com/p/23e61804d81e

  • index.js 中定义功能方法

    // 别人加载的就是我的 index.js 
// 所以，必须在 index.js 中导出内容
function aa() {
console.log('aaa')
}
function bb() {
console.log('bbb')
}
module.exports = { aa, bb }

    Readme.md: ```markdown

    安装

npm i heima-147

使用

const heima = require('heima-147')

heima.aa() // aaaaa
heima.bb() // bbbbb

```

编写功能的时候，如果需要使用其他人的包，也是可以的。比如我们的功能中需要用到 dayjs ，则安装dayjs使用即可。

  • 编写包的说明文档
    包根目录中的 README.md 文件，是包的使用说明文档。通过它，我们可以事先把包的使用说明，以 markdown 的 格式写出来，方便用户参考。
    README 文件中具体写什么内容，没有强制性的要求;只要能够清晰地把包的作用、用法、注意事项等描述清楚即可。

    注册npm账号

  • 访问 https://www.npmjs.com/ 网站

  • 点击 sign up 按钮，进入注册用户界面
  • 填写账号相关的信息
  • 点击 Create an Account 按钮，注册账号

  • 注册完账号，需要到邮箱中认证一下

    发布包

  • 终端中，切换镜像源为npm（不能发布到淘宝，所以必须切换镜像源为npm主站）

    • nrm use npm
  • 终端中，登录 npm 账号
    • 执行 npm login 命令
    • 输入账号
    • 输入密码（输入的密码是看不见的，正常）
    • 输入邮箱
  • 发布
    • 注意，执行命令的文件夹，必须是包的根目录。
    • 运行 npm publish 命令，即可将包发布到 npm 上

发布包.jpg

  • 常见错误
    • 自己的模块名不能和已存在的模块名同名。（可以先去npm网站搜索是否同名）
    • 24小时内不能重复发布
    • 新注册的账号，必须先邮箱（邮件可能是垃圾邮件）验证，然后才能发布
  • 删除已发布的包
    • 运行 npm unpublish 包名 —force 命令，即可从 npm 删除已发布的包。
  • 其他注意事项:
    • npm unpublish 命令只能删除 72 小时以内发布的包
    • npm unpublish 删除的包，在 24 小时内不允许重复发布
    • 发布包的时候要慎重，尽量不要往 npm 上发布没有意义的包!

      更多关于npm的命令：https://www.npmjs.cn/

更新包

如果包的代码更新了，如何重新发布呢？

  • 修改版本号，比如原来的版本号是 1.0.0 ,则需要修改的比原来的版本号大一点，比如改为 1.0.1 或者 1.3.5等等
  • 重新执行 npm publish 即可将代码更新到 npm网站。

    全局模块和本地模块的对比

    本地模块，在安装之前，必须先初始化；全局安装的模块不需要初始化。

image.png

End