1

我正在使用 typescript 3.7.5、tslib 1.10.0 和 vue 2.6.14 开发一个项目。最近我们想升级 typescript 和 tslib 版本，拥有 typescript 4.x 和 tslib 2.x。我将它们升级到 typescript 4.5.2、tslib 2.3.1 并在源代码覆盖中替换了我的 js 文件后，我从前端组件中收到一个错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'split')

这当然没有说什么，所以我开始挖掘。我发现这个问题的原因是在升级 typescript 和 tslib 版本后，Vue 不再包含默认属性。

我的组件像这样导入和导出 Vue：

import Vue, { Component as VueComponent, ComponentOptions, CreateElement, RenderContext, VNode } from "vue";

export default Vue;

export {
  Vue,
  // ... and some other components
};

前端组件像这样使用它：

import { Vue } from "my-component-package";

export const Sth = new Vue();

在编译的前端代码中，产生不同结果的地方是这个方法：

function _interopDefaultLegacy(e) {
    return e && "object" == typeof e && "default" in e ? e : {
      default: e
    }
}

因此：

  1. 我没有从 Vue 导入的默认属性。
  2. 我的对象看起来像这样： { default: { someKey: SomeValue }}而不是：{ someKey: SomeValue, default: { /* some props here */} }

前端组件设置了这些编译标志：

{
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "declaration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "outDir": "./build",
    "allowJs": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
}

我的组件有这些：

{
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "declaration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowJs": false,
}

目标是 es5，模块类型都是 CommonJS。

我尝试使用这些标志：

    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,

双方，但并没有改变任何东西。

我想寻求帮助以了解 vue 的默认导出/导入问题 - 升级 typescript 和 tslib 如何影响此模块的导出/导入方式。当然还有帮助找出可能的解决方案。

先感谢您。

4

0 回答 0