将JS类导入苗条组件的正确方法是什么？

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>

：运行该应用程序我会收到错误：

unduffecrueld SyntaxError：未找到import：default

在生成行上：从“/src/someclass.js？t = 16555451078055”中导入someclass;

注意：

仅使用常规ES6风味类＆amp; someclass.js中的导出默认myClass效果很好，但不妨删除Typescript ...

---

已安装的Svelte-Preprocess

npm install -d svelte-d svelte-preprocess

更新vite> vite 。

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
  })]
})

​

Answer 1

该类是用与Svelte（ES模块）期望的模块系统（commonJ）编译的。

我不建议您单独编译课程，而是建议使用 Svelte-Preprecess 并通过使用＆lt; script lang =“ ts”＆gt; tag直接在组件中的输入源。然后，应该与组件代码一起编译该类。

如果其他任何地方都没有使用类，则可能还可以将模块选项更改为“ esnext”在相应的tsconfig.json中。