您的当前位置:首页正文

ES6模块化的基础知识及使用

2024-11-26 来源:个人技术集锦

【1】使用步骤

1)安装了V14.15.1或更高版本的node.js

2) 创造一个包文件:

在电脑里面新建一个空白文件夹

然后把这个空白文件拖拽到vscode打开,然后用这个命令npm init -y创造一个package.json

,这样操作就在指定的路径创造了一个包文件

3)在生成的package.json里面输入如下:

 "type": "module",

【2】导入其他模块成员:import

        向外共享模块成员:export

【3】默认导出与默认导入的使用

默认导出:export default 默认导出的成员

默认导入:import 接收名称 from '模块路径'

 3.1新建一个默认导出.js在默认导出.js里面定义变量及方法,在export default里面挂载需要默认导出的变量及方法,挂载了的才能被导入。

3.2新建一个默认导入.js,先用import导入方法,然后再用console.log打印测试一下

3.3在终端输入 node 默认导入.js查看结果,可以看到在默认导出文件挂载了的u1及test方法才能被默认导入

 注意事项:在每个模块中值只允许使用一次export.default否则会报错

 【4】按需导出与按需导入

按需导出语法:export 按需导出的成员

按需导入语法:import {s}  from '模块路径'

4.1新建一个按需导出.js在按需导出.js里面定义需要按需导出的变量及方法

4.2新建一个按需导入.js先用import导入,再根据需要导入需要导入的

 4.3在终端运行node 按需导入.js

注意事项:

1)按需导出的名称和按需导入的名称必须一致

2)按需导出可以根据需要多次导出,导入时根据需要可以一次性导入多个,接收名称之间用逗号隔开。

3)按需导入时可以用as进行重命名,重命名后后面引用时需要使用重命名后的名字

4)按需导入可以和默认导入同时使用,同时导入时,默认导入的接收名称要改为info

【5】直接导入

不需要接收导出的成员及方法,直接执行模块中的代码

语法:import '模块路径'

【6】批量导入

使用* as可以全部批量导入并在导入时重新命名

 

显示全文