SpreadJS 升级V14版本后import组件失败问题原因和解决方案

收藏

本帖最后由 KevinChen 于 2020-12-2 17:46 编辑

本文重点分析前端框架用户在结合SpreadJS使用场景下，升级V14后可能出现的import SpreadJS组件失败的问题。

上下文场景：
这部分内容描述了此问题的前因，如果对问题原因不感兴趣或已经有所了解，可以直接跳到第二部分【具体失败原因和现象】。
SpreadJS 针对常见的框架（Angular\Vue\React等）提供了相应的模块，这让我们开发者在框架的模块中可以方便地引入SpreadJS组件。目前SpreadJS 采用的是UMD封装，如果不熟悉UMD封装，可以参考这篇文章（第三方文章仅供参考）：详解AMD、CommonJS和UMD模块化规范

由于一些遗留问题，在V14版本发布前，SpreadJS存在一些UMD组件封装不合理的问题，导致在使用非标准的import语句时也能够成功编译和运行。V14版本修复了这个问题，因此要求开发者在导入SpreadJS模块时，需要编写更加规范的import语句。

具体失败原因和现象：
举个实例说明一下：如附件的示例，在src\views\ExportXlsx.vue 中，由于需要做Excel文档的导入、导出操作，因此这里需要导入@grapecity/spread-excelio等一些依赖包。在V14之前的版本中，以下的导入方式是可以正常执行的：

import GC from '@grapecity/spread-sheets'
import ExcelIO from '@grapecity/spread-excelio'
import '@grapecity/spread-sheets-charts'
import FaverSaver from 'file-saver'
import s from './e.json'

复制代码

熟悉import语句的小伙伴应该知道，这种写法不是标准的import句式，但在老版本中，无论是一些论坛Demo还是交流中写的示例代码，都会常常见到这种写法。至于为何会频繁出现这种写法，大家可以在文后留言交流，谈谈自己的看法。
升级到V14后，当我们访问这个模块、使用导入、导出功能时，console中会抛出一个 TypeError: Cannot read property 'IO' of undefined ，告诉我们创建ExcelIO实例时根本找不到这个命名空间，如图：

image.png842895507.png