如何將 Svelte 組件導入到 JS 文件中

Question

我正在開發一個同時使用原生 JS 和 Svelte 的項目。 我研究了一個 Svelte 組件，我想知道以后如何將它導入到我的 JS 文件中。

*index.js*
// js code here 
alert('here is my sweet Svelte compoent');
-- the svelte component must be here ---
...
//

**MyComponent.svelte**

<script>
   ... the Svelte code ...
</script>
<style>
   ... the Svelte component's style ...
</style>
<div>
   ...
   ...
</div>

Answer 1

你可以簡單地做

import MyComponent from 'MyComponent.svelte'

創建它的一個實例，然后你會做

new MyComponent({
  target: mountpoint // here the dom node where you want to mount it
})

Answer 2

如果您使用的是 JavaScript ES6，則導入 svelte 和其他任何內容的語法如下：

const svelte = require('svelte')

Answer 3

並且不要忘記通過簡單地添加以下內容來更新rollup.config.js文件：

import svelte from "rollup-plugin-svelte";

和

svelte()

在插件的數組中是這樣的：

plugin : [
svelte() 

]