Застосунки Vue 3 збираються через Vite, а AfterPack інтегрується на рівні бандлера, тож @afterpack/vue є тонкою обгорткою: afterpackVue(options) — це і є afterpackVite(options), лише під назвою, яку легше знайти в проєкті Vue.
Застарілі проєкти Vue CLI збираються через webpack, а не Vite. Для них використовуйте @afterpack/webpack.
Встановлення
$ 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(). Іменований експорт називається afterpackVue; пакет також реекспортує afterpackVite і тип AfterpackViteOptions.
Збірка
Тепер vite build видає обфускований результат. vite dev не зачіпається, бо плагін працює лише на етапі generateBundle збірки, до того як Vite запише бандл.
Перевірка
afterpackVue({ protectionMap: { enabled: true } });Записує об'єднану Protection Map у внесений у gitignore .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.Параметри
Будь-який ключ конфігурації можна передати тут в об'єкті параметрів, і він дослівно передається в @afterpack/vite. Псевдонім типу AfterpackVueOptions дорівнює AfterpackViteOptions.
afterpackVue({ seed: "git", preset: "medium" });Директиви
Маркер /* @afterpack … */ усередині файлу .vue не захоплюється. Натомість розмістіть директиви у звичайному модулі .ts/.js, який імпортує компонент:
// src/composables/useLicense.ts
/* @afterpack preset=hard */
export function verify(token: string) {
// ...
}
/* @afterpack end */Кожен згенерований чанк обфускується в будь-якому разі; звичайний модуль потрібен лише для директиви.
Далі
- Фреймворки: повна матриця.
- Vite: плагін, який виконує всю роботу.
- Nuxt: модуль Nuxt 3 поверх того самого плагіна.
- Protection Map: як читати звіт.
- Збірки та CI: сіди, dev проти prod, просування тих самих байтів.