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

本文重点分析前端框架用户在结合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之前的版本中，以下的导入方式是可以正常执行的：

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

复制代码

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


这个问题刚遇到的时候可能会给使用者带来很大的困惑，但实际上对比V13和V14，代码不改动的情况下，很容易定位到问题的大概方向。

解决方案：
经过上述铺垫，实际上我们应该已经知道如何应对这类问题了。在import对应模块时，只要严格按照标准import语句的格式，采用诸如：

1. import * as x from "modulePath"

复制代码

的句式，就不会出现这个问题了。

我把有问题的Demo上传到附件中，大家有兴趣可以自行尝试一下。


如果有任何问题或意见，欢迎大家在本贴交流！