Um modelo de configuração mínima demonstrando como importar componentes CPS Elements com Vite como empacotador do projeto.
CPS Elements é parte do projeto de UI/UX institucional, que também sustenta o CPS Design System, projetados originalmente pelo professor Erick Petrucelli. Independentemente de suas origens e motivações iniciais, é um projeto totalmente open-source disponível sob os termos da licença MIT.
Curiosamente, este exemplo na verdade mostra como nenhuma configuração extra é necessária com Vite! Apenas a instalação da biblioteca de componentes e as importações básicas de estilos e componentes, fim.
Opcionalmente, recursos podem carregados pela instalação local ao invés de serem carregados por CDN. Para tal, a única configuração extra necessária é copiar os ícones de node_modules/@cps-elements/web/assets para assets da distribuição empacotada, através do vite-plugin-static-copy. De fato, esta escolha opcional é o único motivo para o qual este projeto de exemplo contém um arquivo vite.config.js.
Observe que Vite pode ser usado com frameworks JavaScript, onde configurações extras podem ser necessárias, embora em geral rápidas e bem documentadas. De qualquer forma, para utilização com Web nativa, ou seja, HTML, CSS e JavaScript puros, tudo é out-of-the-box.
Este projeto pode ser executado, visualizado e até editado online. Abrir no StackBlitz ⚡️
Para execução com hot-reload em modo de desenvolvimento:
npm run devPara compilar para produção:
npm run buildPara iniciar um servidor local e testar a compilação de produção:
npm run previewEntão abra o navegador na URL exibida após os comandos.