🍰 Receitas
React
Primeiro instale as dependências do React.
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.