SvelteKit Vite से build करता है, और AfterPack bundler स्तर पर integrate होता है, इसलिए @afterpack/sveltekit एक पतला wrapper है: afterpackSveltekit(options) वही है जो afterpackVite(options) है, बस Kit project में आसानी से मिल सके इसलिए यह नाम दिया गया है।
Install
$ npm install -D @afterpack/sveltekit// vite.config.ts
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import { afterpackSveltekit } from "@afterpack/sveltekit";
export default defineConfig({
plugins: [sveltekit(), afterpackSveltekit()],
});इसे sveltekit() के बाद रखें। Named export afterpackSveltekit है; package afterpackVite और AfterpackViteOptions type को भी re-export करता है।
Build
अब vite build obfuscated output देता है। vite dev अछूता रहता है, क्योंकि plugin केवल build के generateBundle पर चलता है, Vite के bundle लिखने से पहले।
आपका adapter JavaScript के रूप में जो भी emit करता है, वह obfuscate होता है। Kit, Vite को एक बार client के लिए और एक बार server के लिए चलाता है, और plugin हर bundle को बनते ही obfuscate करता है, इसलिए adapter-static का prerendered client bundle और Node या serverless server bundle, दोनों कवर होते हैं। adapter-static और adapter-node के साथ adapter build/ में लिखता है; दूसरे adapters कहीं और लिखते हैं।
जब client और server output एक ही release के रूप में ship होते हैं और आप चाहते हैं कि दोनों legs एक ही seed से build हों, तो एक seed pin करें। इसकी गारंटी का सबसे आसान तरीका seed: "git" है। Pin करना कब फ़ायदेमंद है और कब हर build पर नया seed ज़्यादा मज़बूत विकल्प है, यह Builds & CI में है।
Verify
afterpackSveltekit({ 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 AfterpackSveltekitOptions, AfterpackViteOptions ही है।
afterpackSveltekit({ seed: "git", preset: "medium" });Directives
.svelte फ़ाइल के अंदर लिखा /* @afterpack … */ marker capture नहीं होता। इसके बजाय directive को एक सादे .ts/.js module में रखें जिसे route import करता है। src/lib/ इसकी स्वाभाविक जगह है:
// src/lib/license.ts
/* @afterpack preset=hard */
export function verify(token: string) {
// ...
}
/* @afterpack end */Emit होने वाला हर chunk दोनों ही सूरतों में obfuscate होता है; सादे module की ज़रूरत केवल directive को है।
आगे
- Frameworks: पूरी तालिका।
- Vite: वह plugin जो असली काम करता है।
- Svelte: सादे (बिना Kit के) Svelte apps।
- Protection Map: report पढ़ना।
- Builds & CI: seeds, dev बनाम prod, वही bytes promote करना।