🍰 Receitas

React

Primeiro instale as dependências do React.

Blog Post

npm install --save react
npm install --save react-dom
npm install --save-dev parcel-bundler

Ou se você tiver opcionalmente o gerenciador de pacotes Yarn instalado

yarn add react
yarn add react-dom
yarn add --dev parcel-bundler

Adicione o script de inicialização ao package.json

// package.json
"scripts": {
  "start": "parcel index.html"
}

Preact

Primeiro instale as dependências do Preact.

npm install --save preact
npm install --save-dev parcel-bundler

Ou se você tiver opcionalmente o gerenciador de pacotes Yarn instalado

yarn add preact
yarn add --dev parcel-bundler

Adicione o script de inicialização ao package.json

// package.json
"scripts": {
  "start": "parcel index.html"
}

Vue

Primeiro, nós precisamos instalar as dependências para o Vue.

npm install --save vue
npm install --save-dev parcel-bundler

Ou se você tiver opcionalmente o gerenciador de pacotes Yarn instalado

yarn add vue
yarn add --dev parcel-bundler

Adicione o script de inicialização ao package.json

// package.json
"scripts": {
  "start": "parcel index.html"
}

Typescript

Primeiro, nós temos que adicionar o Parcel e Typescript ao nosso projeto.

npm install --save-dev typescript
npm install --save-dev parcel-bundler

Ou se você tiver opcionalmente o gerenciador de pacotes Yarn instalado

yarn add typescript --dev
yarn add --dev parcel-bundler

Compilando a partir do index.html

Adicione o script de inicialização ao package.json

// package.json
"scripts": {
  "start": "parcel index.html"
}

E então, no seu arquivo index.html, simplesmente referencie o seu arquivo .ts.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <!-- Aqui 👇 -->
    <script src="./myTypescriptFile.ts"></script>
</body>
</html>

Feito!

Compilando o arquivo .ts diretamente

Adicione o script de inicialização ao package.json

// package.json
"scripts": {
  "start": "parcel myTypescriptFile.ts"
}

Feito! 😄 O arquivo .js compilado pode ser encontrado dentro do diretório de distribuição.

Ajude-nos a melhorar esta documentação

Se alguma coisa estiver faltando ou não estiver inteiramente clara, por favor crie uma issue no repositório deste site ou edite esta página.