【Node.js】ECMAScript标准 以及 npm安装

目录

[一、 ECMAScript标准 - 默认导出和导入](#一、 ECMAScript标准 - 默认导出和导入)

[二、ECMAScript标准 - 命名导出和导入](#二、ECMAScript标准 - 命名导出和导入)

三、包的概念

[五、 npm - 安装所有依赖](#五、 npm - 安装所有依赖)

[六、 npm - 全局软件包](#六、 npm - 全局软件包)

Node.js总结

[总结不易~ 本章节对我有很大的收获, 希望对你也是!!!](#总结不易~ 本章节对我有很大的收获, 希望对你也是!!!)


本节素材已上传至Gitee:ajax_study: 这是ajax、Node.j学习的仓库 - Gitee.comhttps://gitee.com/liu-yihao-hhh/ajax_study/tree/master/nodejs2

一、 ECMAScript标准 - 默认导出和导入

默认标准使用:

  1. 导出: export default {}
  2. 导入:import 变量名 from '模块化或路径'

注意:Node.js 默认支持CommonJS标准语法

如需要使用ECMAScript 标准语法 , 在运行模块所在文件夹内创建package.json文件, 并设置{"type", "module"}

在utils.js中进行默认导出

javascript 复制代码
/**
 * 目标:基于 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文件中进行默认导入

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

二、ECMAScript标准 - 命名导出和导入

需求: 封装并导出基地址和求数组和的函数

命名标准使用:

  1. 导出: export 修饰定义语句
  2. 导入: import { 同名变量 } from '模块名或路径'

utils.js 文件

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

index.js文件

可以看出当前标准的导入和导出跟我们在vue里面的效果一模一样!还是很好理解的

javascript 复制代码
/**
 * 目标:基于 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)

三、包的概念

包: 将模块、代码、其他资料聚合成一个文件夹

包分类:

  • 项目包: 主要编写项目和业务逻辑
  • 软件包: 封装工具和方法进行使用

在package.json文件中:对项目进行一个描述

javascript 复制代码
{
  "name": "cz_utils", // 软件包名称
  "version": "1.0.0", // 软件包当前版本
  "description": "一个数组和字符串常用工具方法的包", // 软件包简短秒速
  "main": "index.js", // 软件包入口点
  "author": "itheima", // 软件包作者
  "license": "MIT" // 软件包许可证
}

将utils文件包进行打包引入到server.js文件内进行使用

完成打包的效果

server.js文件

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

四、npm - 软件包管理器

定义: npm是Node.js标准的软件包管理器, 起初是作为下载和管理Node.js 包依赖的方式,现在也成为前端Javascript中的使用工具

使用:

  1. 初始化清单文件: npm init -y
  2. 下载软件包: npm i 软件包名称
  3. 使用软件包

需求: 使用dayjs 软件包 来格式化日期时间

  1. 初始化项目清单文件 生成package.json文件

下载软件包

server.js文件

javascript 复制代码
/**
 * 目标:使用 npm 下载 dayjs 软件包来格式化日期时间
 *  1. (可选)初始化项目清单文件,命令:npm init -y
 *  2. 下载软件包到当前项目,命令:npm i 软件包名称
 *  3. 使用软件包
 */
// 3. 使用软件包
const dayjs = require('dayjs')
const nowDateStr = dayjs().format('YYYY-MM-DD')
console.log(nowDateStr)

可以快速调用,进行日期时间转换

五、 npm - 安装所有依赖

当我们引入别人写的项目,不存在node_modules软件包的时候 是不能在运行的,所以我们为了能够顺利运行,package.json文件中有记录着所有的软件包,只需要node -i 就可以完成所有的安装依赖

六、 npm - 全局软件包

软件包区别:

  • 本地软件包:当前项目内使用,封装属性和方法,存在于 node_modules
  • 全局软件包:本机所有项目使用,封装命令和工具,存在于系统设置的位置

nodemon 作用:替代 node 命令,检测代码更改,自动重启程序

使用:

  1. 安装:npm i nodemon -g(-g 代表安装到全局环境中)
  2. 运行:nodemon 待执行的目标 js 文件:nodemon server.js

需求:启动准备好的项目,修改代码保存后,观察自动重启应用程序

Node.js总结

Node.js 模块化:

概念:每个文件当做一个模块,独立作用域,按需加载

使用:采用特定的标准语法导出和导入进行使用

CommonJS 标准一般应用在 Node.js 项目环境中

ECMAScript 标准一般应用在前端工程化项目中 。

Node.js 包:

概念:把模块文件,代码文件,其他资料聚合成一个文件夹

项目包:编写项目需求和业务逻辑的文件夹

软件包:封装工具和方法进行使用的文件夹(一般使用 npm 管理)

  • √ 本地软件包:作用在当前项目,一般封装的属性 / 方法,供项目调用编写业务需求
  • √ 全局软件包:作用在所有项目,一般封装的命令 / 工具,支撑项目运行

常用命令:

功能 命令
执行 js 文件 node xxx
初始化 package.json npm init -y
下载本地软件包 npm i 软件包名
下载全局软件包 npm i 软件包名 -g
删除软件包 npm uni 软件包名

总结不易~ 本章节对我有很大的收获, 希望对你也是!!!

相关推荐
kyriewen1 天前
别再 console.log 了:5 个 Chrome DevTools 调试技巧,用过就回不去了
前端·javascript·面试
IT_陈寒1 天前
Python搞不定字符串编码?这破玩意坑我两小时!
前端·人工智能·后端
To_OC1 天前
LC 1 两数之和:面试第一道必考题,暴力解法直接被面试官 pass
javascript·算法·leetcode
DigitalOcean1 天前
Laravel 开发者已在 DigitalOcean 上开通超过 10 万台服务器
前端·laravel
星始流年1 天前
从 Tool 到 Skill——基于 LangChain 的服务端Skill实现
前端·langchain·agent
李惟1 天前
开源本地通信库,纯客户端 RPC,像聊天一样通信
前端
YAwu111 天前
深入解析 React 炫彩鼠标跟随标题组件:从坐标定位到动画性能
前端·react.js
GuWenyue1 天前
排序效率低?5分钟吃透快速排序,性能飙升至O(nlogn)
前端·javascript·面试
OpenTiny社区1 天前
🎨 看完 GenUI SDK 源码我悟了!
前端·vue.js·github
叁两1 天前
前端转型AI Agent该如何学习?(前置篇)
前端·人工智能·node.js