AfterPack
Ver como Markdown

Ofusca una app de Vue

@afterpack/vue envuelve @afterpack/vite para proyectos de Vue 3: una línea de plugin en vite.config.ts.

Las apps de Vue 3 compilan con Vite, y AfterPack se integra a nivel de bundler, así que @afterpack/vue es un envoltorio muy ligero: afterpackVue(options) es afterpackVite(options), con un nombre pensado para que sea fácil de encontrar en un proyecto de Vue.

Los proyectos antiguos de Vue CLI compilan con webpack en lugar de Vite. En ellos usa @afterpack/webpack.

Instalación

$ 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()],
});

Colócalo después de vue(). La exportación con nombre es afterpackVue; el paquete también reexporta afterpackVite y el tipo AfterpackViteOptions.

Build

vite build emite ahora salida ofuscada. vite dev no se toca, porque el plugin solo se ejecuta en el generateBundle del build, antes de que Vite escriba el bundle.

Verificación

afterpackVue({ protectionMap: { enabled: true } });

Escribe el Protection Map combinado en .afterpack/protectionMap.html, ignorado por git. El efecto secundario sobre los source maps y las reglas para manejarlos son los de @afterpack/vite.

entitlements.jslight · complexity 5Open full size
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.

Opciones

Cualquier clave de configuración puede pasarse aquí en el objeto de opciones, que se reenvía tal cual a @afterpack/vite. El alias de tipo AfterpackVueOptions es AfterpackViteOptions.

afterpackVue({ seed: "git", preset: "medium" });

Directivas

Un marcador /* @afterpack … */ dentro de un archivo .vue no se captura. Pon las directivas en un módulo .ts/.js normal que el componente importe:

// src/composables/useLicense.ts
/* @afterpack preset=hard */
export function verify(token: string) {
  // ...
}
/* @afterpack end */

Cada chunk emitido se ofusca de todos modos; solo la directiva necesita el módulo normal.

Siguiente

  • Frameworks: la matriz completa.
  • Vite: el plugin que hace el trabajo real.
  • Nuxt: el módulo de Nuxt 3 sobre el mismo plugin.
  • Protection Map: cómo leer el informe.
  • Builds y CI: semillas, desarrollo frente a producción y promocionar los mismos bytes.