pixijs/pixijs-create

O que pixijs-create faz?

Use esta skill ao criar um novo projeto PixiJS v8 com a CLI create-pixi ou adicionar PixiJS a um projeto existente. Abrange comandos de criação com npm/yarn/pnpm/bun, fluxos interativos vs não interativos, categorias de templates (bundler vs creation), presets de template disponíveis (bundler-vite, bundler-webpack, bundler-esbuild, bundler-import-map, creation-web, framework-react, extension-default), requisitos de versão do Node.js, npm install pixi.js para projetos existentes, fluxo de desenvolvimento pós-scaffold e a armadilha de produção com top-level-await no Vite. Gatilhos: criar pixi.js, npm create, npm install pixi.js, scaffold, template, bundler-vite, bundler-webpack, creation-web, framework-react, novo projeto, projeto existente, começando, início rápido.

Visão Geral

Esta skill auxilia na configuração de um novo projeto PixiJS v8 usando o comando create-pixi ou na adição da biblioteca pixi.js a um projeto JavaScript/TypeScript existente. O create-pixi é uma ferramenta oficial que gera a estrutura inicial do projeto com várias opções de template.

Criando um Novo Projeto

Uso Interativo

Para iniciar o assistente interativo, execute:

npm create pixi.js@latest

Ou com outros gerenciadores:

yarn create pixi.js
pnpm create pixi.js
bun create pixi.js

Uso Não Interativo (linha de comando)

Você pode pular o assistente interativo e especificar o template diretamente:

npm create pixi.js@latest -- --template <nome-do-template> [--yes]

Substitua <nome-do-template> por um dos templates listados abaixo. A flag --yes aceita as opções padrão.

Templates Disponíveis

Templates Bundler (com empacotador)

Template	Descrição
bundler-vite	Projeto Vite + TypeScript (recomendado)
bundler-webpack	Projeto Webpack + TypeScript
bundler-esbuild	Projeto esbuild + TypeScript
bundler-import-map	Projeto import map + TypeScript

Templates Creation (sem empacotador)

Template	Descrição
creation-web	HTML + JavaScript simples
framework-react	Projeto React + Vite + TypeScript
extension-default	Extensão PixiJS

Adicionando PixiJS a um Projeto Existente

Para adicionar a biblioteca PixiJS a um projeto existente, execute:

npm install pixi.js

Ou com outros gerenciadores:

yarn add pixi.js
pnpm add pixi.js
bun add pixi.js

Requisitos

• Node.js: v18.0.0 ou superior.
• Certifique-se de que o npm, yarn, pnpm ou bun está atualizado.

Fluxo de Desenvolvimento Pós-Scaffold

Após criar o projeto:

1. Navegue até a pasta do projeto:

cd nome-do-projeto

2. Inicie o servidor de desenvolvimento:

npm run dev

3. Para construir para produção:

npm run build

Armadilha: Top-Level Await no Vite

Se você estiver usando o template bundler-vite (ou React com Vite) e encontrar um erro de build como:

Error: Top-level await is not available in the configured target environment for this module

Isso ocorre porque, por padrão, o Vite trata o top-level-await como suportado, mas em alguns navegadores e configurações de produção isso não é verdade.

Solução

No arquivo vite.config.ts, adicione a seguinte configuração:

export default defineConfig({
  build: {
    target: 'esnext'
  }
})

Ou mude o target para es2022 se precisar de maior compatibilidade:

export default defineConfig({
  build: {
    target: 'es2022'
  }
})

Gatilhos de Ativação

• criar pixi.js
• npm create
• npm install pixi.js
• scaffold
• template
• bundler-vite
• bundler-webpack
• creation-web
• framework-react
• novo projeto
• projeto existente
• começando
• início rápido