将 js 类导入 Svelte 组件的正确方法是什么？

Question

我有一个SomeClass.ts像：

class SomeClass {
  constructor () {
    console.log('created someclass')
  }
}

export default SomeClass

编译为SomeClass.js

'use strict'
exports.__esModule = true
const SomeClass = /** @class */ (function () {
  function SomeClass () {
    console.log('created someclass')
  }
  return SomeClass
}())
exports.default = SomeClass

并被导入到App.svelte的脚本标签中，如：

<script>
  import SomeClass from "./SomeClass";

  const instance = new SomeClass();
</script>

但是在运行应用程序时出现错误：

Uncaught SyntaxError: import not found: default

在生成的行上： import SomeClass from "/src/SomeClass.js?t=1655451078055";

笔记：

只需在 SomeClass.js 中使用常规 ES6 风格类并export default MyClass就可以正常工作，但也可以删除 Typescript ...

---

安装了 svelte-preprocess

npm install -D svelte-preprocess

像这样更新vite.config.js ：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import sveltePreprocess from 'svelte-preprocess' // <--- added this

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte({
    preprocess: sveltePreprocess() // <--- added this
  })]
})

删除了编译后的 .js，现在直接使用 Typescript 文件没问题！

Answer 1

该类是使用与 Svelte（ES 模块）预期的不同的模块系统（CommonJS）编译的。

我不建议单独编译该类，而是使用svelte-preprocess并通过使用<script lang="ts">标记直接在组件中导入/使用 TypeScript 源。 然后该类应与组件代码一起编译。

如果该类未在其他任何地方使用，您也可以在相应的tsconfig.json中将module选项更改为"esnext" 。