es6中import * as导入方式

es6中import * as导入方式

一、问题和解决方法

问题报错:

export 'default' (imported as 'XLSX') was not found in 'xlsx' (possible exports: CFB, SSF, parse_xlscfb, parse_zip, read, readFile, readFileSync, set_cptable, set_fs, stream, utils, version, write, writeFile, writeFileAsync, writeFileSync, writeFileXLSX, writeXLSX)
解决:

import XLSX from 'xlsx'

改为

import * as XLSX from 'xlsx'

二、简介import * as

import * as XLSX from 'xlsx' 中的 import * as 是 ES6 模块化语法中的一种导入方式。

这种语法允许你将一个模块的所有导出内容都绑定到一个命名空间对象上,以便在当前模块中使用。在这个例子中,* as XLSX 的意思是将整个 xlsx 模块的导出内容都绑定到一个名为 XLSX 的命名空间对象上。
通过使用 import * as XLSX,你可以通过 XLSX 对象来访问 xlsx 模块中导出的所有函数、变量或其他成员。
例如,在之后的代码中,你可以使用 XLSX.readFile()、XLSX.utils.sheet_to_json() 等等,来调用 xlsx 库提供的各种函数和方法。
这种导入方式的好处是可以避免命名冲突,因为所有的导出成员都被封装在一个命名空间对象中,而不会直接暴露在当前模块的作用域中。你可以自由地在当前模块中定义与 XLSX 命名空间对象相同名称的变量或函数,而不会发生冲突。
总结起来,import * as XLSX 语句的意思是将整个 xlsx 模块的导出内容绑定到一个名为 XLSX 的命名空间对象上,以便在当前模块中使用。

三、ES6 模块化语法导入导出

1.导入

ES6 模块化语法提供了一种方便和灵活的方式来导入和导出模块中的函数、变量和其他成员。下面是关于 ES6 模块化语法的导入和导出的说明。
导入(Import)模块成员:
在 ES6 中,使用 import 关键字可以导入其他模块中的成员(函数、变量等)。导入的语法如下:

javascript 复制代码
import { member1, member2 } from 'module-name';

这里的 module-name 是要导入的模块的路径或模块名称,member1 和 member2 是该模块中要导入的具体成员的名称。

如果想导入整个模块的所有成员到一个命名空间对象中,可以使用 import * as 语法:

javascript 复制代码
import * as namespace from 'module-name';

这样会将模块的所有成员绑定到一个名为 namespace 的对象上。

2.导出

在 ES6 中,使用 export 关键字可以导出当前模块的成员供其他模块使用。导出的语法如下:

javascript 复制代码
export const member1 = value1;
export function member2() {
  // ...
}

这样,通过 export 关键字可以导出常量、变量、函数等。

还可以使用 export default 导出默认成员,每个模块只能有一个默认导出:

javascript 复制代码
export default member;

这里的 member 是要导出的默认成员。

在其他模块中,通过 import 语法来引入已导出的成员,然后就可以使用这些成员了。

需要注意的是,ES6 的模块化语法需要在支持的 JavaScript 运行环境中使用,例如现代的浏览器或使用工具如 Webpack、Babel 来进行转译和打包

相关推荐
hunterandroid5 小时前
HarmonyOS WebSocket 实战:断线重连、心跳保活与连接状态机设计
前端
hunterandroid5 小时前
StateFlow 与 SharedFlow 的边界:状态与事件的正确建模
android·前端
心念科技5 小时前
1、搜索表单 xnSearch(基于:心念后台,后端 Java 21 + Spring Boot 4 + Spring Cloud,前端提供 ReactVue3+TS、Vue3+JS、Vue2+JS
前端
计算机魔术师6 小时前
Dwarkesh Patel 对 OpenAI/Hugging Face 事件的爆款解读被指危险误导
前端
自进化Agent智能体6 小时前
Hermes GitHub PR 审查 —— 自动化代码评审
前端
涛涛ing8 小时前
OpenAI Astra 泄露:零样本生成 3D 网页,前端开发者慌了吗?
前端
ssshooter9 小时前
现在网页都能提供 MCP 了?!
前端·人工智能·程序员
杉氧9 小时前
状态管理变迁史:为什么我们放弃了 Redux 选择 Zustand?
android·前端·react native
cidy_989 小时前
OpenCode 手动配置火山方舟 Agent Plan 教程
前端
鹏多多9 小时前
PC 网站接入微信登录,这 10 个坑我替你踩完了!
前端·javascript·vue.js