Vue 3 apps Vite से build होते हैं, और AfterPack bundler स्तर पर integrate होता है, इसलिए @afterpack/vue एक पतला wrapper है: afterpackVue(options) असल में afterpackVite(options) ही है, बस Vue project में आसानी से मिल सके, इसलिए यह नाम रखा गया है।
पुराने Vue CLI projects Vite की जगह webpack से build होते हैं। वहाँ @afterpack/webpack का उपयोग करें।
Install
$ npm install -D @afterpack/vue// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { afterpackVue } from "@afterpack/vue";
export default defineConfig({
plugins: [vue(), afterpackVue()],
});इसे vue() के बाद रखें। Named export afterpackVue है; package afterpackVite और AfterpackViteOptions type को भी re-export करता है।
Build
अब vite build obfuscated output emit करता है। vite dev अछूता रहता है, क्योंकि plugin केवल build के generateBundle पर चलता है, Vite के bundle लिखने से पहले।
Verify
afterpackVue({ protectionMap: { enabled: true } });संयुक्त Protection Map को gitignored .afterpack/protectionMap.html में लिखता है। Source map से जुड़ा side effect और उसे संभालने के नियम @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 AfterpackVueOptions, AfterpackViteOptions ही है।
afterpackVue({ seed: "git", preset: "medium" });Directives
.vue फ़ाइल के अंदर लिखा /* @afterpack … */ marker capture नहीं होता। इसके बजाय directives को एक सादे .ts/.js module में रखें जिसे component import करता है:
// src/composables/useLicense.ts
/* @afterpack preset=hard */
export function verify(token: string) {
// ...
}
/* @afterpack end */हर emit हुआ chunk दोनों ही सूरतों में obfuscate होता है; सादे module की ज़रूरत केवल directive को है।
आगे
- Frameworks: पूरी तालिका।
- Vite: वह plugin जो असली काम करता है।
- Nuxt: उसी plugin पर बना Nuxt 3 module।
- Protection Map: रिपोर्ट पढ़ना।
- Builds & CI: seeds, dev बनाम prod, वही bytes promote करना।