前端框架前置知识之Node.js:模块化、导入导出语法、包的概念、npm介绍

2024-07-19 1391阅读

什么是模块化?

在Node.js中,每一个文件都被视为一个单独的模块

概念:项目是由很多个模块文件组成的

好处:提高代码复用性,按需加载,独立作用域

使用:需要标准语法导出和导入进行使用

前端框架前置知识之Node.js:模块化、导入导出语法、包的概念、npm介绍

导入导出语法

CommonJS 标准

使用:

1. 导出:module.exports = {}

2. 导入:require('模块名或路径')

模块名或路径:

✓ 内置模块:直接写名字(例如:fs,path,http)

✓ 自定义模块:写模块文件路径(例如:./utils.js)

前端框架前置知识之Node.js:模块化、导入导出语法、包的概念、npm介绍

ECMAScript 标准

到时候学了Vue之后都是用ECMAScript 标准进行导入和导出,所以这种语法要重点掌握

默认导出和导入

默认标准使用:

1. 导出:export default {}

2. 导入:import 变量名 from '模块名或路径' 

前端框架前置知识之Node.js:模块化、导入导出语法、包的概念、npm介绍

注意:Node.js 默认支持 CommonJS 标准语法 如需使用 ECMAScript 标准语法,在运行模块所在文件夹新建 package.json 文件,并设置 { "type" : "module" }

前端框架前置知识之Node.js:模块化、导入导出语法、包的概念、npm介绍

命名导出和导入

命名标准使用:

1. 导出:export 修饰定义语句

2. 导入:import { 同名变量 } from '模块名或路径‘

前端框架前置知识之Node.js:模块化、导入导出语法、包的概念、npm介绍

如何选择: 按需加载,使用命名导出和导入

全部加载,使用默认导出和导入

包的概念

如果说模块是文件,那么包就是文件夹

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

包分类:

✓ 项目包:主要用于编写项目和业务逻辑

✓ 软件包:封装工具和方法进行使用

要求:根目录中,必须有 package.json 文件(记录包的清单信息)

前端框架前置知识之Node.js:模块化、导入导出语法、包的概念、npm介绍

注意:导入软件包时,引入的默认是 index.js 模块文件,如果软件包中没有index.js文件,那么就引入 package.json 中 main 属性指定的模块文件

通俗地讲,就是无论你的软件包里写了多少个方法,最终对外暴露出的都是index.js中的方法。因此,编写软件包代码的套路是:在其他文件中定义方法并导出,再导入到index.js中,并在index.js中导出这些方法

前端框架前置知识之Node.js:模块化、导入导出语法、包的概念、npm介绍

前端框架前置知识之Node.js:模块化、导入导出语法、包的概念、npm介绍

npm - 软件包管理器

前端框架前置知识之Node.js:模块化、导入导出语法、包的概念、npm介绍

软件包分类

➢ 本地软件包:当前项目内使用,封装属性和方法,存在于 node_modules

➢ 全局软件包:本机所有项目使用,封装命令和工具,存在于系统设置的位置 

本地软件包 

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

2. 下载软件包 :npm i 软件包名称(软件包源码自动放入 node_modules 中)

3. 使用软件

前端框架前置知识之Node.js:模块化、导入导出语法、包的概念、npm介绍

为什么下载了别人的项目之后不能直接运行?

因为项目中不包含 node_modules

为什么node_modules包不会被拷贝过来?

因为,自己用 npm 下载依赖比磁盘传递拷贝要快得多

解决:项目终端输入命令:npm i 下载 package.json 中记录的所有软件包。注意,要先把package-lock.json删除,再执行npm i命令

全局软件包

以nodemon为例介绍全局软件包

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

使用:

1. 安装:npm i nodemon -g(-g 代表安装到全局环境中)

2. 运行:nodemon 待执行的目标 js 文件

常用命令总结

前端框架前置知识之Node.js:模块化、导入导出语法、包的概念、npm介绍

VPS购买请点击我

免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

目录[+]