npm-介绍和下包

zxp鹏
65 阅读6分钟

npm-介绍

  1. npm是什么
  • npm（node package manager）node 包 管理器。管理node包的工具。

  1. npm作用

    • 可以, 下载, 删除, 发布 包的一个工具

      以前需要axios, 需要去百度找对应js文件, 现在用npm工具, 知道名字即可直接下载到工程中

  2. 包是什么?

    • Node.js 中的第三方模块又叫做包

npm-包管理配置文件（初始化环境）

理解包管理配置的概念

npm 规定，在项目根目录中，必须提供一个叫做 package.json 的包管理配置文件，用来记录与项目有关的一些配置信息，例如：

  • 项目的名称、版本号、描述等
  • 项目中都用到了哪些包
  • 哪些包只会在开发期间会用到
  • 哪些包在开发和部署时都需要用到

package.json 配置文件的作用

多人协作的问题

  1. 包的体积

    • 整个项目的体积是 30.4M
    • 第三方包的体积是 28.8M
    • 项目源代码的体积 1.6M

  2. 遇到的问题

    • 第三方包的体积过大，不方便团队成员之间共享项目源代码

  3. 解决方案

    • 共享时剔除node_modules

如何记录项目中安装了哪些包

  • 在项目根目录中，创建一个叫做 package.json的配置文件，即可用来记录项目中安装了哪些包。从而方便剔除 node_modules 目录之后，在团队成员之间共享项目的源代码
  • 在项目开发中，一定要把 node_modules 文件夹，添加到 .gitignore 忽略文件中

快速创建 package.json

npm 包管理工具提供了一个快捷命令，可以在执行命令时所处的目录中，快速创建 package.json 这个包管理配置文件

npm init 
npm init -y

npm-下载axios包

  1. 下载第三方模块的命令如下

    # 正常的下载安装
npm install 模块包名
​
# 简写install为i
npm i 模块包名
​
# 一次性安装多个模块
npm i 模块包名 模块包名 模块包名
​
# 下载包 可以指定包的版本号
npm i 包名@版本号
​
# 卸载包
npm uninstall 包名
​
# 一次下载项目里面所有的包
npm i

  2. 我们需要的模块包名, 具体下载命令可以从这个npmjs网站查看

  3. 这里我们以axios举例, 下载axios包, 输入如下命令

    npm i axios

npm-删除包

使用npm命令, 删除包

  1. 先在应用程序文件夹, 下载一个jquery包, 查看node_modules, 是否下载成功

  2. 使用npm uninstall jquery命令, 来卸载指定的包

npm-镜像地址

  1. 输入命令npm config list可以查看npm的配置列表

    npm是从指定的registry地址下载的包

  2. 淘宝镜像: 淘宝在国内架设的服务器(会按时从npm官方同步所有包和版本代码, 映射到淘宝在国内的服务器上)

  3. 好处: 淘宝在国内服务器, 比npm默认的下载地址国外的要快

  4. 把npm切换成淘宝镜像的地址, 永久方式切换命令如下 (因为修改npm, 终端的文件夹可以是任意位置)

    npm config set registry https://registry.npmmirror.com/

  5. 切换后, 运行npm config list查看registry选项的值是否切换成功

    如果是第一次安装, 可能没有registry选项, 也没关系, 那npm还是使用默认地址, 只要不影响我们下包即可

npm-全局包-nodemon

  1. 和本地包的差异

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

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

      这个全局包, 只有一些固定名字的才是全局的, 某些是本地的(例如: axios, moment)

  2. 和本地模块下载命令差异

    • 本地安装的模块, npm i 模块包名
    • 全局安装的模块, npm i 模块包名 -g (只需要多加一个-g参数, 意思是global全局安装)

  3. 下载nodemon全局模块包, 命令如下

    此包的作用, 启动js后, 可以实时检测js文件变化, 自动更新最新代码, 不必手动重新运行

    npm i nodemon -g

    提示: mac系统提示权限不够, 请在前面加sudo 命令 sudo npm i 模块包名 -g

  4. 安装是否成功, 可以在终端输入以下命令查看 nodemon -v, 如果提示版本号, 则证明全局包安装成功, 带来了nodemon命令

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

  6. 使用nodemon命令来代替node命令, 去执行js文件

npm-全局模块-nrm

  1. 使用npm下载nrm这个全局模块包名

    npm i nrm -g

  2. 得到nrm命令, 使用nrm -V查看nrm版本(注意, 这里V必须大写)

  3. 使用命令nrm ls 查看全部可用的镜像地址

  4. 相中了哪个, 可以使用nrm use 左侧名字进行切换, 可以切换npm 下载地址

    nrm use npm

  5. 输入完回车后, 可以运行npm config list查看下载的地址

*跨域-概念讲解

  1. 新建代码/跨域/index.html, 引入axios的js文件链接

  2. 编写代码, 请求获取接口

    axios({
    url: 'http://localhost:3000/api/getBooks'
}).then(res => {
    console.log(res);
}).catch(err => {
    console.error(err)
})

  3. 使用vscode+liveServer运行新建的html文件, 查看控制台, 报错

image.png

  1. 报错讲解

    • 讲解: 在'http://localhost:3000/api/head“, 从源”http://127.0.0.1:5500'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'头
    • 场景: 网页打开时, 所在地址栏里的url中 协议, 域名, 端口号和内嵌ajax请求的url中的, 协议, 域名, 端口号有一个对应不上, 就出现了"跨域访问"
    • 原理: 因为 -> 浏览器本身存在 <浏览器同源策略>
    • 概念: 同源策略，它是由Netscape提出的一个著名的浏览器安全策略。同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是"客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。"

  2. 总结

    • 跨域概念: 是"浏览器"对"ajax"做出的限制, 遵守浏览器同源策略, 为了保护网页内容安全
    • 跨域场景(重点-以后要用口诀来判断是否跨域): 网页打开时, 所在地址栏里的url中 协议, 域名, 端口号和内嵌ajax请求的url中的, 协议, 域名, 端口号有一个对应不上, 就出现了"跨域访问"
    • 跨域报错过程: 浏览器请求发送了, 服务器也响应了, 但是浏览器发现了跨域访问, 判断是否有`响应头: Access Control Allow Origin' (后端是否允许跨域访问, 如果允许, 浏览器就把数据留下, 否则抛弃掉然后报错)

跨域-解决方案

  1. 现代浏览器默认是支持跨域资源共享的, 但是有个前提, ajax请求的服务器, 在响应头需要设置Access-Control-Allow-Origin

  2. 在中server.js代码中, 设置响应头

    // 支持浏览器ajax跨域访问, * 代表任意人都可以来请求
res.setHeader('Access-Control-Allow-Origin', '*')

  3. 前端正常发送ajax请求即可, 前端无需任何修改

avatar
文章
阅读
粉丝