¿Qué hace pixijs-crear?
Utiliza esta habilidad al crear un nuevo proyecto PixiJS v8 con la CLI create-pixi o al agregar PixiJS a un proyecto existente. Cubre comandos de creación con npm/yarn/pnpm/bun, flujos interactivos y no interactivos, categorías de plantillas (bundler vs creación), plantillas disponibles (bundler-vite, bundler-webpack, bundler-esbuild, bundler-import-map, creation-web, framework-react, extension-default), requisitos de versión de Node.js, npm install pixi.js para proyectos existentes, flujo de desarrollo posterior al scaffold y el problema de producción con Vite y top-level-await. Se activa con: create pixi.js, npm create, npm install pixi.js, scaffold, template, bundler-vite, bundler-webpack, creation-web, framework-react, new project, existing project, getting started, quick start.
Crear un nuevo proyecto
Comandos básicos
Para crear un nuevo proyecto PixiJS v8, ejecuta uno de los siguientes comandos (elige el gestor de paquetes que prefieras):
# npm
npm create pixi.js@latest
# yarn
yarn create pixi.js
# pnpm
pnpm create pixi.js
# bun
bun create pixi.js
Flujo interactivo
Ejecutar el comando sin argumentos iniciará un asistente interactivo que te guiará por los pasos de configuración del proyecto. Necesitarás seleccionar una plantilla, un nombre de proyecto y otras opciones.
Flujo no interactivo (modo script)
Puedes proporcionar el nombre del proyecto y la plantilla directamente para una ejecución automatizada:
npm create pixi.js@latest -- my-pixi-project --template bundler-vite
Plantillas disponibles
Las plantillas se organizan en dos categorías:
- bundler: Configuran un proyecto con un empaquetador.
- creation: Proyectos que no requieren empaquetador o son configuraciones específicas.
| Categoría | Plantilla | Descripción |
|---|---|---|
| bundler | bundler-vite | Proyecto con Vite como empaquetador (recomendado) |
| bundler | bundler-webpack | Proyecto con Webpack |
| bundler | bundler-esbuild | Proyecto con esbuild |
| bundler | bundler-import-map | Proyecto con mapa de importaciones |
| creation | creation-web | Proyecto web básico (sin empaquetador) |
| creation | framework-react | Proyecto con React y PixiJS |
| creation | extension-default | Extensión por defecto para PixiJS |
Ejemplos de uso
# Proyecto con Vite
npm create pixi.js@latest -- --template bundler-vite
# Proyecto con React
npm create pixi.js@latest -- --template framework-react
Requisitos de Node.js
Asegúrate de tener instalada una versión de Node.js compatible (generalmente Node.js 18 o superior para create-pixi v8). Verifica tu versión con:
node --version
Agregar PixiJS a un proyecto existente
Si ya tienes un proyecto y deseas agregar PixiJS, instala el paquete directamente:
npm install pixi.js
O con otros gestores:
yarn add pixi.js
pnpm add pixi.js
bun add pixi.js
Flujo de desarrollo posterior al scaffold
Una vez creado el proyecto (por ejemplo, con la plantilla bundler-vite), puedes iniciar el servidor de desarrollo y construir para producción:
cd my-pixi-project
npm run dev # Inicia servidor de desarrollo
npm run build # Construye para producción
npm run preview # Previsualiza la build de producción
Problema conocido: Vite y top-level-await
Si usas bundler-vite, ten en cuenta que el uso de top-level-await en el código fuente puede provocar un error en la build de producción. Para evitarlo, envuelve el código asíncrono en una función async o ajusta la configuración de Vite (build.target y build.modulePreload).
Solución recomendada:
// En lugar de:
await someAsyncFunction();
// Usa:
(async () => {
await someAsyncFunction();
})();
Soporte adicional
Para más información, consulta la documentación oficial de PixiJS.