导出Excel文件发布报错： Cannot read properties of undefined (reading 'utils')

问题描述

• 背景： 导出Excel本地import XLSX from 'xlsx';不报错
• 问题： 发布后报错 Cannot read properties of undefined (reading 'utils')
• 解决： 替换为import * as XLSX from 'xlsx';

问题分析

这个问题涉及到 JavaScript 模块的导入（import）方式以及编译或打包工具的处理方式。

1. 本地环境 vs 发布环境： 在本地开发环境中，代码可能直接运行在支持 ES6 模块语法的环境中，比如现代的浏览器或支持模块化的 Node.js 环境。因此，可以使用 import XLSX from 'xlsx'; 这种简单的导入语法，它假定模块默认导出了一个 XLSX 对象。
2. 发布环境的处理： 当代码被发布并通过打包工具（如Webpack、Rollup等）处理时，会使用一种更普遍且兼容性更好的导入方式。这意味着需要使用更标准的导入语法来确保在所有环境中都能正确运行。
3. 为什么需要 import * as XLSX from 'xlsx'; ： 使用 import * as XLSX from 'xlsx'; 的方式是一种常见的模块导入方式，它会将 xlsx 模块的所有导出内容都绑定到一个名为 XLSX 的对象上。这样做的好处是，可以访问模块中的所有内容，而不仅仅是默认导出的部分。这种导入方式也更通用，适用于各种发布环境和模块系统。
4. 如何解决问题： 如果项目在发布后出现导入错误，建议始终使用更通用的导入方式 import * as XLSX from 'xlsx';。这样可以确保代码在所有环境中都能正常工作。即使在本地开发环境中，这种导入方式也是安全的，因为它具有更广泛的兼容性。

总结起来，导入方式的选择取决于开发环境和发布环境的差异。为了确保代码的可靠性和可移植性，建议在导入模块时使用更通用的 import * as ModuleName from 'module'; 形式。