將 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" 。