node模块导出引入两种方式和npm包管理

模块化的好处

  1. 在 Node.js 中每个文件都被当做是一个独立的模块,模块内定义的变量和函数都是独立作用域的,因为 Node.js 在执行模块代码时,将使用如下所示的函数封装器对其进行封装

    (function(exports,require,module,__filename,_dirname){
    	//模块代码实际存在于此处
    });
    
  2. 而且项目是由多个模块组成的,每个模块之间都是独立的,而且提高模块代码复用性,按需加载,独立作用域

CommonJS 标准导出引入

  1. 但是因为模块内的属性和函数都是私有的,如果对外使用,需要使用标准语法导出和导入才可以,而这个标准叫 CommonJS 标准,接下来我们在一个需求中,体验下模块化导出和导入语法的使用

  2. 需求:定义 utils.js 模块,封装基地址和求数组总和的函数,导入到 index.js 使用查看效果

  3. 导出语法:

    module.exports = {
      对外属性名: 模块内私有变量
    }
    
  4. 导入语法:

    const 变量名 = require('模块名或路径')
    // Node.js 环境内置模块直接写模块名(例如:fs,path,http)
    // 自定义模块:写模块文件路径(例如:./utils.js)
    

    变量名的值接收的就是目标模块导出的对象

  5. 代码实现

    • utils.js:导出

      /**
       * 目标:基于 CommonJS 标准语法,封装属性和方法并导出
       */
      const baseURL = 'http://hmajax.itheima.net'
      const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
      
      // 导出
      module.exports = {
        url: baseURL,
        arraySum: getArraySum
      }
      
    • index.js:导入使用

      /**
       * 目标:基于 CommonJS 标准语法,导入工具属性和方法使用
       */
      // 导入
      const obj = require('./utils.js')
      console.log(obj)
      const result = obj.arraySum([5, 1, 2, 3])
      console.log(result)
      

小结

  1. CommonJS 标准规定如何导出和导入模块?

    答案: 导出:module.exports = {},导入:require(‘模块名或路径’)

  2. 模块名/路径如何选择?

    答案: 内置模块:写名字。例如:fs,path,http等。自定义模块:写模块文件路径,例如:./utils.js

ECMAScript标准-默认导出和导入

介绍

  1. CommonJS 规范是 Node.js 环境中默认的,后来官方推出 ECMAScript 标准语法

  2. 导出语法:

    export default {
      对外属性名: 模块内私有变量
    }
    
  3. 导入语法:

    import 变量名 from '模块名或路径'
    

    变量名的值接收的就是目标模块导出的对象

  4. 注意:Node.js 默认只支持 CommonJS 标准语法,如果想要在当前项目环境下使用 ECMAScript 标准语法,请新建 package.json 文件设置 type: ‘module’ 来进行设置

    { “type”: "module" }
    
  5. 代码实现:

    • utils.js:导出

      /**
       * 目标:基于 ECMAScript 标准语法,封装属性和方法并"默认"导出
       */
      const baseURL = 'http://hmajax.itheima.net'
      const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
      
      // 默认导出
      export default {
        url: baseURL,
        arraySum: getArraySum
      }
      
    • index.js:导入

      /**
       * 目标:基于 ECMAScript 标准语法,"默认"导入,工具属性和方法使用
       */
      // 默认导入
      import obj from './utils.js'
      console.log(obj)
      const result = obj.arraySum([10, 20, 30])
      console.log(result)
      

小结

  1. ECMAScript 标准规定如何默认导出和导入模块?

    答案: 导出:export default {} 导入:import 变量名 from ‘模块名或路径’

  2. 如何让 Node.js 切换模块标准为 ECMAScript?

    答案: 运行模块所在文件夹,新建 package.json 并设置 {“type”:“module”}

ECMAScript标准-命名导出和导入

目标

掌握 ECMAScript 标准语法中,命名导出和导入的使用

讲解

  1. ECMAScript 标准的语法有很多,常用的就是默认和命名导出和导入,这节课我们来学习下命名导出和导入的使用

  2. 需求:封装并导出基地址和数组求和函数,导入到 index.js 使用查看效果

  3. 命名导出语法:

    export 修饰定义语句
    
  4. 命名导入语法:

    import { 同名变量 } from '模块名或路径'
    

    注意:同名变量指的是模块内导出的变量名

  5. 代码示例:

    • utils.js 导出

      /**
       * 目标:基于 ECMAScript 标准语法,封装属性和方法并"命名"导出
       */
      export const baseURL = 'http://hmajax.itheima.net'
      export const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
      
      
    • index.js 导入

      /**
       * 目标:基于 ECMAScript 标准语法,"命名"导入,工具属性和方法使用
       */
      // 命名导入
      import {baseURL, getArraySum} from './utils.js'
      console.log(obj)
      console.log(baseURL)
      console.log(getArraySum)
      const result = getArraySum([10, 21, 33])
      console.log(result)
      
  6. 与默认导出如何选择:

    • 按需加载,使用命名导出和导入
    • 全部加载,使用默认导出和导入

小结

  1. Node.js 支持哪 2 种模块化标准?

    • CommonJS 标准语法(默认)
    • ECMAScript 标准语法
  2. ECMAScript 标准,命名导出和导入的语法?

    • 导出:export 修饰定义的语句,import { 同名变量 } from ‘模块名或路径’
  3. ECMAScript 标准,默认导出和导入的语法?

    • 导出:export default {} 导入:import 变量名 from ‘模块名或路径’

包的概念

目标

了解 Node.js 环境中包的概念

讲解

  1. 包:将模块,代码,其他资料整合成一个文件夹,这个文件夹就叫包

  2. 包分类:

    • 项目包:主要用于编写项目和业务逻辑
    • 软件包:封装工具和方法进行使用
  3. 包要求:根目录中,必须有 package.json 文件(记录包的清单信息)

    在这里插入图片描述
    在这里插入图片描述

  4. 包使用:在引入一个包文件夹到代码中,默认引入的是包文件夹下的 index.js 模块文件里导出的对象,如果没有 index.js 文件,则会引入 package.json 里 main 属性指定的文件模块导出的对象

  5. 需求:封装数组求和函数的模块,封装判断用户名和密码长度函数的模块,形成一个软件包,并导入到 index.js 中使用查看效果

  6. 代码示例:

    • utils/lib 相关代码准备好了,只需要自己在 utils/index.js 统一出口进行导出
    • utils/lib/arr.js
     // 数组求和函数
     const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
    
     module.exports = {
       getArraySum
     }
    
    • utils/lib/str.js
     const checkUserName = username => {
       return username.length >= 8
     }
    
     const checkPassWord = password => {
       return password.length >= 6
     }
    
     module.exports = {
       checkUser: checkUserName,
       checkPwd: checkPassWord
     }
    
    • utils/package.json
    {
      "name": "cz_utils",
      "version": "1.0.0",
      "description": "一个数组和字符串常用工具方法的包",
      "main": "index.js",
      "author": "itheima",
      "license": "MIT"
    }
    
    • utils/index.js
    /**
     * 本文件是,utils 工具包的唯一出口
     * 作用:把所有工具模块方法集中起来,统一向外暴露
     */
    const { getArraySum } = require('./lib/arr.js')
    const { checkUser, checkPwd } = require('./lib/str.js')
    
    // 统一导出所有函数
    module.exports = {
      getArraySum,
      checkUser,
      checkPwd
    }
    ```
    
    
  • 在utils包外的server.js使用包(注意:这次导入的是包文件夹,不是模块文件)

    /**
     * 目标:导入 utils 软件包,使用里面封装的工具函数
     */
    const obj = require('./utils')
    console.log(obj)
    const result = obj.getArraySum([10, 20, 30])
    console.log(result)
    

npm软件包管理器

目标

掌握使用 npm 管理软件包

npm简介

  • npm是Node.js标准的软件包管理器。用于下载和管理 Node.js 环境中的软件包。
  • 在2017年1月时,pm仓库中就已有超过350000个软件包,这使其成为世界上最大的单一语言代码仓库,并且可以确定几乎有可用于一切的软件包。
  • 它起初是作为下载和管理Node.js包依赖的方式,但其现在也已成为前端JavaScript中使用的工具。
  • npm就跟Java中的maven差不多。

npm 使用步骤:

  1. 初始化清单文件: npm init -y (得到 package.json 文件,有则跳过此命令)

    注意 -y 就是所有选项用默认值,所在文件夹不要有中文/特殊符号,建议英文和数字组成,因为 npm 包名限制建议用英文和数字或者下划线中划线

  2. 下载软件包:npm i 软件包名称

  3. 使用软件包

  4. 需求:使用 npm 下载 dayjs 软件包到本地项目文件夹中,引入到 index.js 中格式化日期打印,运行观察效果

  5. 具体使用流程图:
    在这里插入图片描述

  6. 下载的包会存放在哪里?

    • 当前项目下的 node_modules 中,并记录在 package.json 中

npm安装所有依赖

目标

掌握 npm 安装所有依赖功能

讲解

  1. 我们拿到了一个别人编写的项目,但是没有 node_modules,项目能否正确运行?

    不能,因为缺少了项目需要的依赖软件包,比如要使用 dayjs 和 lodash 但是你项目里没有这个对应的源码,项目会报错的
    在这里插入图片描述

  2. 为何没有给我 node_modules?

    因为每个人在自己的本机使用 npm 下载,要比磁盘间传递要快(npm 有缓存在本机)

  3. 如何得到需要的所有依赖软件包呢?

    直接在项目目录下,运行终端命令:npm i 即可安装 package.json 里记录的所有包和对应版本到本项目中的 node_modules

在这里插入图片描述

  1. 需求:请在准备好的素材项目中,安装项目所有需要的依赖软件包,并运行 index.js 代码看是否正常!

小结

  1. 当前项目中只有 package.json 没有 node_modules 怎么办?

    • 当前项目目录下,打开终端,执行 npm i 安装所有依赖软件包
  2. 为什么 node_modules 不进行传递?

    • 因为用 npm 下载有缓存在本机,比磁盘之间传递要快

npm全局软件包-nodemon

介绍

  1. 软件包区别:

    • 本地软件包:当前项目内使用,封装属性和方法,存在于 node_modules
    • 全局软件包:本机所有项目使用,封装命令和工具,存在于系统设置的位置
  2. nodemon 作用:替代 node 命令,检测代码更改,自动重启程序

  3. 使用:

    1. 安装:npm i nodemon -g (-g 代表安装到全局环境中)
    2. 运行:nodemon 待执行的目标 js 文件
  4. 需求:使用 nodemon 命令来启动素材里准备好的项目,然后修改代码保存后,观察终端重启应用程序

Node.js常用命令总结

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/107882.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

解密Kubernetes:探索开源容器编排工具的内核

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

x210项目重新回顾之十七升级到linux4.19.114 +buildroot2018再讨论

代码参考https://github.com/colourfate/x210_bsp/ 他的是linux_4.10(dtb为 s5pv210-x210..dtb)我打算用linux4.19.114(dtb为 s5pv210-smdkv210.dtb) ,所以修改build.sh ------------------------------------------------------------------------------ 5 M…

实用篇-认识微服务

一、服务架构演变 1. 单体架构 单体架构:将业务的所有功能集中在一个项目中开发,打成一个包部署 单体架构的优点: 架构简单部署成本低 单体架构的缺点: 耦合度高 2. 分布式架构 分布式架构: 根据业务功能对系…

京东平台数据分析(京东销量):2023年9月京东吸尘器行业品牌销售排行榜

鲸参谋监测的京东平台9月份吸尘器市场销售数据已出炉! 根据鲸参谋电商数据分析平台的相关数据显示,今年9月,京东吸尘器的销量为19万,环比下滑约12%,同比下滑约25%;销售额为1.2亿,环比下滑约11%&…

MAC下安装Python

MAC基本信息: 执行命令: brew install cmake protobuf rust python3.10 git wget 遇到以下问题: > Downloading https://mirrors.aliyun.com/homebrew/homebrew-bottles/rust-1.59.0 Already downloaded: /Users/xxxx/Library/Caches/Ho…

vue笔记(三)

15、过滤器 过滤器 用法:对要显示的数据进行特定格式化后再显示(用于一个简单的逻辑处理)语法 1、注册过滤器:Vue.fillter(name,callback) (全局)或 new Vue{filters:{}}(局部&…

FFmpeg5.1.3编译动态库踩坑之旅(基于Linux虚拟机)

准备工作 环境准备 1.Windows安装Oracle VM VirtualBox 7.0.10,安装ubuntu-22.04.3。 坑一:无法往虚拟机里拖放复制文件,解决办法:登录Ubuntu虚拟机时切换到xorg方式登录,参考地址:Ubuntu Desktop 22.04…

『51单片机』 DS1302时钟

🚩 WRITE IN FRONT 🚩 🔎 介绍:"謓泽"正在路上朝着"攻城狮"方向"前进四" 🔎🏅 荣誉:2021|2022年度博客之星物联网与嵌入式开发TOP5|TOP4、2021|2222年获评百大…

PHP如何批量修改二维数组中值

每个name值加pex,age加5, 原数据: $data[["name">a,age>12],["name">b,age>22],["name">c,age>33],["name">d,age>44], ];实现效果 方案一、foreach引用方式 $data[["…

redis6.0源码分析:简单动态字符串sds

文章目录 sds简介与特性(面试)sds结构模型数据结构苛刻的数据优化数据结构优化uintX_t对齐填充 sds优势O(1)时间复杂度获取字符串长度二进制安全杜绝缓冲区溢出自动扩容机制——sdsMakeRoomFor方法 内存重分配次数优化 sds最长是多少部分API源码解读创建sds释放sds sds简介与特…

从Mysql架构看一条查询sql的执行过程

1. 通信协议 我们的程序或者工具要操作数据库,第一步要做什么事情? 跟数据库建立连接。 首先,MySQL必须要运行一个服务,监听默认的3306端口。在我们开发系统跟第三方对接的时候,必须要弄清楚的有两件事。 第一个就是通…

nodejs+vue人脸识别考勤管理系统的设计与实现-计算机毕业设计

根据分析,本系统主要有3个角色:管理员、用户、考勤系统。 (1)管理员:管理员信息的添加、删除、修改和查询,用户信息添加、删除、修改和查询。 (2)用户:用户的注册和登录&…

面试准备中........

一、Linux 计算机网络相关: 1.OSI七层模型 应用层 :给用户提供操作界面 表示层:数据的表示:将字符转化为2进制或将2进制转化为字符。加密:对称加密和非对称加密,ssh协议。压缩:将文件压缩。…

Android笔记(九):Compose组件的状态(一)

在使用Compose定义UI界面时,可以发现界面的变换往往与Compose组件内部的状态相关,当状态值发生变化时,Compose构成的可组合的界面也会刷新发生相应的变化。将在本笔记中将对可组合项的状态的定义、状态提升、状态丢失和状态的保存进行简单介绍…

开源3D激光(视觉)SLAM算法汇总(持续更新)

目录 一、Cartographer 二、hdl_graph_slam 三、LOAM 四、LeGO-LOAM 五、LIO-SAM 六、S-LOAM 七、M-LOAM 八、livox-loam 九、Livox-Mapping 十、LIO-Livox 十一、FAST-LIO2 十二、LVI-SAM 十三、FAST-Livo 十四、R3LIVE 十五、ImMesh 十六、Point-LIO 一、Cartographer Cartog…

NSS [鹤城杯 2021]EasyP

NSS [鹤城杯 2021]EasyP 直接给了源码 <?php include utils.php;if (isset($_POST[guess])) {$guess (string) $_POST[guess];if ($guess $secret) {$message Congratulations! The flag is: . $flag;} else {$message Wrong. Try Again;} }if (preg_match(/utils\.p…

[ACTF2020 新生赛]Include

【解题思路】 1.打开链接 发现好东西&#xff0c;进一步分析。 2.分析页面 发现网页得到一个GET请求-->?fileflag.php 可以推断&#xff0c;要解答该题目需要获取 flag.php 的源代码. 将flag.php文件进行base64编码&#xff08;将网页源代码转换为Base64编码&#xff…

电脑QQ如何录制视频文件?

听说QQ可以录制视频&#xff0c;还很方便&#xff0c;请问该如何录制呢&#xff1f;是需要先打开QQ才可以录制吗&#xff1f;还是可以直接使用快捷键进行录制呢&#xff1f;录制的质量又如何呢&#xff1f; 不要着急&#xff0c;既然都打开这篇文章看了&#xff0c;那小编今天…

【软考】系统集成项目管理工程师(十)项目质量管理【3分】

一、质量概念 1、定义 国际&#xff1a;反应实体满足主体明确和隐含需求的能力的特性总和 国内&#xff1a;一组固有特性满足要求的程度 2、质量与等级 质量&#xff1a;作为实现的性能或成果&#xff0c;是一系列内在特性满足要求的程度ISO9000 等级&#xff1a;作为设计意…

elementUI el-collapse 自定义折叠面板icon 和 样式 或文字展开收起

: :v-deep{.el-collapse-item__arrow {width: 40px;}.el-icon-arrow-right:before {content: "展开";font-size: 15px;font-family: heiti;color: #2295ff;font-weight: bold;}.el-collapse-item__arrow.is-active {transform: none;}.el-collapse-item__arrow.is-a…