【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 软件包名

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

相关推荐
用户3076752811271 分钟前
💡 从"傻等"到"流淌":我在AI项目中实现流式输出的血泪史(附真实代码+深度解析)
前端
bluceli2 分钟前
前端性能优化实战指南:让你的网页飞起来
前端·性能优化
UIUV2 分钟前
RAG技术学习笔记(含实操解析)
javascript·langchain·llm
SuperEugene4 分钟前
Vue状态管理扫盲篇:如何设计一个合理的全局状态树 | 用户、权限、字典、布局配置
前端·vue.js·面试
没想好d5 分钟前
通用管理后台组件库-9-高级表格组件
前端
阿虎儿8 分钟前
React Hook 入门指南
前端·react.js
核以解忧31 分钟前
借助VTable Skill实现10W+数据渲染
前端
WangHappy34 分钟前
不写 Canvas 也能搞定!小程序图片导出的 WebView 通信方案
前端·微信小程序
李剑一38 分钟前
要闹哪样?又出现了一款新的格式化插件,尤雨溪力荐,速度提升了惊人的45倍!
前端·vue.js
闲云一鹤1 小时前
Git LFS 扫盲教程 - 你不会还在用 Git 管理大文件吧?
前端·git·前端工程化