Svelte apps Vite के ज़रिए JavaScript में compile होते हैं, और AfterPack bundler स्तर पर integrate होता है, इसलिए @afterpack/svelte एक पतला wrapper है: afterpackSvelte(options) ही afterpackVite(options) है, बस Svelte project में आसानी से मिल सके इसलिए यह नाम दिया गया है।
पूरा SvelteKit app build कर रहे हैं? @afterpack/sveltekit इस्तेमाल करें। Rollup से Svelte component library build कर रहे हैं? @afterpack/rollup इस्तेमाल करें।
Install
$ npm install -D @afterpack/svelte// vite.config.ts
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { afterpackSvelte } from "@afterpack/svelte";
export default defineConfig({
plugins: [svelte(), afterpackSvelte()],
});इसे svelte() के बाद रखें। Named export afterpackSvelte है; package afterpackVite और AfterpackViteOptions type को भी re-export करता है।
Build
vite build अब obfuscated output emit करता है। vite dev अछूता रहता है, क्योंकि plugin केवल build के generateBundle पर चलता है, Vite के bundle लिखने से पहले।
Verify
afterpackSvelte({ protectionMap: { enabled: true } });यह संयुक्त Protection Map को gitignored .afterpack/protectionMap.html में लिखता है। Source map पर पड़ने वाला असर और उसे संभालने के नियम @afterpack/vite वाले ही हैं।
entitlements.js, 54 lines, built at the light preset with a directive around the signature check. Click any token to see what was applied to it.Options
हर configuration key यहाँ options object के रूप में दी जा सकती है, जो बिना बदलाव @afterpack/vite को आगे भेजा जाता है। Type alias AfterpackSvelteOptions, AfterpackViteOptions ही है।
afterpackSvelte({ seed: "git", preset: "medium" });Directives
.svelte फ़ाइल के अंदर का /* @afterpack … */ marker capture नहीं होता। Directives को इसके बजाय एक सामान्य .ts/.js module में रखें जिसे component import करता है:
// src/lib/license.ts
/* @afterpack preset=hard */
export function verify(token: string) {
// ...
}
/* @afterpack end */हर emitted chunk किसी भी हाल में obfuscate होता है; सामान्य module की ज़रूरत केवल directive को है।
आगे
- Frameworks: पूरी matrix।
- Vite: वह plugin जो असली काम करता है।
- SvelteKit: Kit का wrapper package।
- Protection Map: रिपोर्ट पढ़ना।
- Builds और CI: seeds, dev बनाम prod, वही bytes promote करना।