Criando um projeto VanillaJS com VJSCLI

Lennon Alves Dias
Nov 7 · 3 min read

🤔 O que é o VJSCLI ?

O Vanilla JavaScript CLI é um projeto que tem como intuito disponibilizar uma CLI para projetos em ES6 utilizando WebPack e Babel. Foi utilizado sass no projeto, para testes unitários Jasmine + Karma. Para a documentação foi utilizado o docjs com template do docdash.

👨‍🏫 Introdução ao VJSCLI

O primeiro passo para a utilização do pacote é realizar a instalação através do gerenciador de pacotes NPM, utilizando o comando abaixo

npm install -g vjscli

Para validar se a instalação ocorreu corretamente, basta utilizar um dos comandos abaixo

vjs -V
vjs --version

Uma imagem como essa deve aparecer após a execução

Versão do VJSCLI instalado na máquina

É possível também consultar o helper do pacote, onde você pode encontrar os comandos necessários para criação de um novo projeto ou um novo componente:

vjs -h
vjs --helper
Helper do VJSCLI com a lista de funcionalidades e seus comandos

👨‍💻 Show Me the Command!

Com os comandos para visualizar a versão e identificar se estamos com a instalação do pacote atualizada e para visualizar as funcionalidades disponíveis no pacote, podemos iniciar a criação de um novo projeto

vjs -n projetovjs -a "Lennon Dias" -d "Projeto Exemplo VJS"

Em alguns instantes o projeto estará criado à partir da pasta onde você executou o comando acima:

Criação de um novo projeto utilizando VJSCLI
Estrutura de pastas e arquivos gerada pelo VJSCLI

É possível também, gerar novos componentes dentro do projeto criado:

vjs -g login
Estrutura de pastas da criação do componente

🚀 Executando o projeto

Após gerar o projeto e os componentes conforme sua necessidade, você pode executar utilizando o comando:

npm run local

Após a execução, seu projeto estará disponível acessando o endereço http://localhost:8080/

Visualização da tela default do projeto

Outros comandos úteis para o seu novo projeto são: o build (valida o seu projeto e gera os arquivos finais para utilização em ambiente de produção) e o docs (gera documentação do seu desenvolvimento).

npm run build
npm run docs

📝 Últimas considerações

O projeto foi disponibilizado dia 01/11/2019 e conta com seus mantenedores e a ajuda da comunidade para novas atualizações.

Para contribuir ou entender melhor sobre o VJSCLI você pode acessar a página oficial do projeto no GitHub através do link: https://bit.ly/34Dv1zr e a página NPM do projeto através do link: https://bit.ly/2Nqomml.

Lennon Alves Dias

Written by

Computer Scientist, Developer. Computer Science (UTFPR/PG — 2015). Artificial Intelligence & Machine Learning (FIAP/SP — 2020).

XP Inc.

XP Inc.

Aqui você vai encontrar os principais conteúdos de tecnologia da XP Inc.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade