efektywne środowisko Node.js

masz pytania?

Aby stworzyć efektywne środowisko Node.js na Linuxie (Ubuntu, Mint, Debian) do programowania frontendu z różnymi frameworkami (Vue.js, Svelte, SvelteKit, Qwik), które pozwala na izolację projektów (podobnie jak venv w Pythonie) oraz wybór wersji Node.js, możemy skorzystać z narzędzi takich jak nvm (Node Version Manager) oraz pnpm (szybki i efektywny menedżer pakietów). Poniżej przedstawiam krok po kroku, jak to zrobić.

Krok 1: Instalacja `nvm` (Node Version Manager)

nvm pozwala na łatwe zarządzanie wieloma wersjami Node.js na jednym systemie.

Zainstaluj nvm:
Otwórz terminal i wykonaj następujące polecenie:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

Załadowanie nvm do bieżącej sesji terminala:
Po instalacji dodaj nvm do swojego środowiska:

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

Sprawdź, czy nvm działa:
```
nvm --version
```

Krok 2: Instalacja wybranej wersji Node.js

Zainstaluj konkretną wersję Node.js:
Na przykład, aby zainstalować Node.js w wersji 18:
```
nvm install 18
```
Użyj zainstalowanej wersji:
```
nvm use 18
```
Sprawdź wersję Node.js i npm:
```
node -v
npm -v
```
Ustaw domyślną wersję Node.js (opcjonalnie):
Jeśli chcesz, aby ta wersja była domyślna:
```
nvm alias default 18
```

Krok 3: Instalacja `pnpm` (opcjonalnie, ale zalecane)

pnpm to szybki i efektywny menedżer pakietów, który oszczędza miejsce na dysku, współdzieląc zależności między projektami.

Zainstaluj pnpm globalnie:
```
npm install -g pnpm
```
Sprawdź wersję pnpm:
```
pnpm -v
```

Krok 4: Tworzenie izolowanych projektów

Aby tworzyć izolowane projekty (podobnie jak venv w Pythonie), możemy skorzystać z pnpm lub npm z lokalnymi zależnościami.

Przykład: Tworzenie projektu Vue.js

Utwórz katalog projektu:
```
mkdir my-vue-project
cd my-vue-project
```
Zainicjuj projekt:
```
pnpm init
```
Zainstaluj Vue.js:
```
pnpm add vue
```

Utwórz plik index.html i main.js:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js Project</title>
</head>
<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>
</html>

// main.js -------------------------------
import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Witaj, Vue!',
    };
  },
});

app.mount('#app');

Uruchom projekt:
Użyj narzędzia takiego jak vite do uruchomienia projektu:
```
pnpm create vite@latest
```

Przykład: Tworzenie projektu Svelte

Utwórz katalog projektu:

mkdir my-svelte-project
cd my-svelte-project

Zainicjuj projekt:
```
pnpm init
```
Zainstaluj Svelte:
```
pnpm add svelte
```

Utwórz plik App.svelte i main.js:

<!-- App.svelte -->
<script>
  let message = 'Witaj, Svelte!';
</script>
      
<h1>{message}</h1>

// main.js --------------
import App from './App.svelte';
       
const app = new App({
  target: document.body,
});

export default app;

Uruchom projekt:
Użyj narzędzia vite:
```
pnpm create vite@latest
```

Przykład: Tworzenie projektu SvelteKit

Utwórz projekt SvelteKit:

pnpm create svelte@latest my-sveltekit-project
cd my-sveltekit-project
pnpm install

Uruchom projekt:
```
pnpm run dev
```

Przykład: Tworzenie projektu Qwik

Utwórz projekt Qwik:

pnpm create qwik@latest my-qwik-project
cd my-qwik-project
pnpm install

Uruchom projekt:
```
pnpm start
```

Krok 5: Zarządzanie wieloma projektami

Każdy projekt ma swój własny katalog z lokalnymi zależnościami (node_modules), dzięki czemu są one izolowane. Możesz łatwo przełączać się między projektami i używać różnych wersji Node.js za pomocą nvm.

Podsumowanie

Dzięki temu środowisku:

Możesz używać różnych wersji Node.js za pomocą nvm.
Każdy projekt jest izolowany dzięki lokalnym zależnościom.
Możesz efektywnie zarządzać zależnościami za pomocą pnpm.
Możesz tworzyć projekty w różnych frameworkach (Vue.js, Svelte, SvelteKit, Qwik) w jednym systemie.