如何将Svelte组件导入到原生JavaScript文件中

Got it, let's walk through how to get your Svelte component working in your vanilla JavaScript index.js file. Browsers can't natively parse .svelte files, so we need to either compile the component upfront (the production-ready approach) or use the Svelte compiler directly in the browser (great for quick testing/prototyping).

1. Production-Friendly Approach: Use a Build Tool (Vite Recommended) #

Vite has fantastic out-of-the-box support for Svelte, making this the easiest way to integrate your component with vanilla JS.

Step-by-Step: #

• If you haven't already, initialize a Vite project with the Svelte template:

  npm create vite@latest my-project -- --template svelte
  cd my-project
  npm install
  

• Drop your MyComponent.svelte file into the src directory of your project.
• Update your index.js (or point your Vite entry to it) to import and mount the component:

// index.js
// Import your Svelte component
import MyComponent from './MyComponent.svelte';

// Mount the component to a DOM element (make sure this exists in your HTML)
const componentInstance = new MyComponent({
  target: document.getElementById('svelte-component-mount'),
  // Optional: Pass props to your component if needed
  // props: {
  //   message: 'Hello from vanilla JS!'
  // }
});

alert('here is my sweet Svelte component');

• Add a mount point in your HTML file (usually index.html):

<div id="svelte-component-mount"></div>
<script type="module" src="/index.js"></script>

• Run npm run dev to start the dev server, and your component will render alongside your vanilla JS code.

2. Quick Testing: Compile in the Browser #

If you want to skip build tools for a quick prototype, you can use the Svelte compiler directly in the browser. Note: Don't use this for production—it's slow and adds unnecessary overhead.

Step-by-Step: #

• First, add the Svelte compiler CDN script to your HTML:

<script src="https://unpkg.com/svelte@4/dist/svelte.min.js"></script>
<div id="svelte-component-mount"></div>
<script src="index.js"></script>

• Update your index.js to fetch and compile the .svelte file:

// index.js
// Fetch your Svelte component's source code
fetch('./MyComponent.svelte')
  .then(response => response.text())
  .then(componentSource => {
    // Compile the component into a usable class
    const compiled = Svelte.compile(componentSource, { generate: 'dom' });
    // Extract the component class from the compiled output
    const MyComponent = (new Function(compiled.js.code))().default;

    // Mount the component to your DOM element
    const componentInstance = new MyComponent({
      target: document.getElementById('svelte-component-mount')
    });

    alert('here is my sweet Svelte component');
  })
  .catch(error => console.error('Failed to load/compile component:', error));

• Make sure you're running this through a local server (like VS Code's Live Server extension)—browsers block fetch requests for local files without one.

Key Notes: #

• Svelte automatically scopes your component's styles, so you don't have to worry about style conflicts with your vanilla JS code.
• When using props, make sure your Svelte component declares them in its <script> tag (e.g., export let message;) to accept values from vanilla JS.

内容的提问来源于stack exchange，提问作者Elishah LMT