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.
Top comments (0)