Build Project Svelte untuk Dibuka di Protocol "file:"

#svelte #html #vite #javascript

Buat project Svelte:

pnpm create vite

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

Pilih Svelte.

Pilih JavaScript.

Kemudian, masuk ke folder latihan:

cd latihan

Git init (recommended):

git init

Buka dengan VS Code:

code .

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

Install dependencies:

pnpm i

Install Vite Plugin Legacy dan Terser:

pnpm i @vitejs/plugin-legacy terser

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
+    })
  ],
});

Build:

pnpm build

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>

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>

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.

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more