DEV Community

Cover image for Build Project Svelte untuk Dibuka di Protocol "file:"
Zen
Zen

Posted on • Updated on

Build Project Svelte untuk Dibuka di Protocol "file:"

#svelte #html #vite #javascript

Buat project Svelte:

pnpm create vite
Enter fullscreen mode Exit fullscreen mode

Pas ditanya project name, masukkan nama project yang diinginkan. Misalnya aja: "latihan".

Pilih Svelte.

Pilih JavaScript.

Kemudian, masuk ke folder latihan:

cd latihan
Enter fullscreen mode Exit fullscreen mode

Git init (recommended):

git init
Enter fullscreen mode Exit fullscreen mode

Buka dengan VS Code:

code .
Enter fullscreen mode Exit fullscreen mode

Tapi, aku lebih suka bukanya dengan extension Project Manager sih. Tinggal klik aja nama "latihan" di list Project Manager.

Install dependencies:

pnpm i
Enter fullscreen mode Exit fullscreen mode

Install Vite Plugin Legacy dan Terser:

pnpm i @vitejs/plugin-legacy terser
Enter fullscreen mode Exit fullscreen mode

Edit vite.config.js menjadi seperti berikut:

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
+ import legacy from '@vitejs/plugin-legacy';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte(),
+    legacy({
+      renderModernChunks: false
+    })
  ],
});
Enter fullscreen mode Exit fullscreen mode

Build:

pnpm build
Enter fullscreen mode Exit fullscreen mode

Buka dist/index.html. Kan isinya seperti ini awalnya:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte</title>

  </head>
  <body>
    <div id="app"></div>
    <script crossorigin id="vite-legacy-polyfill" src="/assets/polyfills-legacy-CsGtGfX8.js"></script>
    <script crossorigin id="vite-legacy-entry" data-src="/assets/index-legacy-CTkYmYBZ.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Hapus crossorigin dan sesuaikan src dan data-src menjadi seperti berikut:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte</title>

  </head>
  <body>
    <div id="app"></div>
    <script  id="vite-legacy-polyfill" src="./assets/polyfills-legacy-CsGtGfX8.js"></script>
    <script  id="vite-legacy-entry" data-src="./assets/index-legacy-CTkYmYBZ.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Klik kanan dist/index.html, lalu pilih Copy Path. Nah, sekarang paste ke browser.

Berhasil.

Yuk join komunitas Zen Sharing untuk mendapatkan informasi bermanfaat seperti di artikel ini.

Top comments (0)

Read next

joshuaamaju profile image

The Right Way to Add Images to Emails in Next.JS

Joshua Amaju -

paharihacker profile image

A Complete Guide to React useEffect vs useLayoutEffect for Beginners

Rajesh Dhiman -

harshboricha98 profile image

Cloud Computing Beyond Containers: How Cloudflare’s Isolates Are Changing the Game

Harsh boricha -

safdarali profile image

5 Steps You Must Follow to Deploy a React App on Hostinger

Safdar Ali -