JavaScript: Parcel praca z kodem przy minimalnej konfiguracji

Opublikowano: 09.05.2023 - tagi: JavaScript TypeScript Narzędzie

Czym jest Parcel?

Jeśli masz już doświadczenie w pisaniu we front-end coś takiego, jak Webpack pewnie obiło Ci się o uszy.

Parcel to coś podobnego do Webpack'a. Służy do kompilowania kodu jak: JavaScript, TypeScript, CSS/SCSS itp. Czyli pisząc w skrócie Parcel daje programiście wszystko, co potrzebne, żeby zacząć tworzyć aplikacje.

Ktoś może zapytać: skoro istnieje Webpack to po co kolejne tego typu narzędzie?! To, co wyróżnia Parcel to ograniczenie konfiguracji do zbędnego minimum.

Potrzebujesz narzędzia, które: przekompiluje Ci kod z TypeScript do JavaScript? Dodaje style napisane SCSS? Zminimalizuje kod? Stworzy build'a gotowego do wrzucenia na produkcję?

Chcesz po prostu zacząć działać? Użyj Parcel.

Instalacja

Pierwszy krok to instalacja. Wpisz komendę:

npm install --save-dev parcel

Następnie stwórz plik index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Parcel</title>
</head>
<body>
<script type="module" src="index.ts"></script>
</body>
</html>

W przykładzie użyjemy TypeScript. Do pliku dołączany jest index.ts, który będzie zawierał cały nasz kod.

Następnie do pliku packge.json dodaj to:

{
  "source": "index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  }
}

Skrypt start uruchamia aplikację. Z kolei build tworzy... build'a.

Użycie

Stwórz plik: product.ts i dodaj kod:

interface Product {
	name: string;
	price: number;
}

export const product: Product = {
	name: 'Some product',
	price: 150
}

Teraz index.ts:

import product from './product.ts';

console.log(product); // { name: "Some product", price: 150 }

Wpisz w terminalu komendę:

npm run start