JavaScript: варианты установки и настройки

Раздел: JavaScript -> Установка и настройка

JavaScript является языком, встроенным в браузеры, поэтому для его выполнения не требуется отдельная установка. Однако для разработки веб-приложений и серверных скриптов необходимы инструменты: среда выполнения (Node.js) и редактор кода. Рассмотрены основные способы настройки окружения.

Основной способ: установка Node.js и редактора кода

Наиболее эффективный подход для разработчика JavaScript – установка Node.js (LTS версия) и редактора Visual Studio Code. Это покрывает большинство сценариев: от написания простых скриптов до создания сложных проектов.

Шаги:

Скачать дистрибутив Node.js с официального сайта (https://nodejs.org) – LTS версию.
Установить, следуя инструкциям. На Windows добавить в PATH (галочка по умолчанию).
Проверить установку:
```
node --version
```
установка js (установка javascript)
```
v18.18.0
```
Установить VS Code с https://code.visualstudio.com.
Создать папку проекта, в ней файл app.js:
```
console.log('Привет, мир!');
```
Открыть терминал в VS Code (Ctrl+`), выполнить:
```
node app.js
```
```
Привет, мир!
```

Типичные ошибки:

'node' не является внутренней или внешней командой – не добавлен путь к Node в переменную PATH. Решение: переустановить Node, отметив опцию "Add to PATH".
Ошибка синтаксиса – неверный синтаксис кода. Проверить файл на опечатки.

Как установить и переключать разные версии Node.js?

Для систем на базе Unix (macOS, Linux) менеджер версий nvm позволяет легко устанавливать и переключать версии Node без конфликтов.

Установка nvm:

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

Добавить строку в ~/.bashrc или ~/.zshrc:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

Установка последней LTS версии:

nvm install --lts

Переключение версий:

nvm use 18.18.0

Проблемы:

nvm: команда не найдена – после установки нужно перезагрузить терминал или выполнить source ~/.bashrc.
Ошибка доступа – nvm устанавливает версии локально, не требуя sudo.

Как быстро проверить JavaScript код без локальной установки?

Онлайн-редакторы позволяют писать и запускать HTML, CSS и JavaScript прямо в браузере. Не требуется никаких дополнительных инструментов.

Пример: открыть codepen.io, создать новый Pen, вставить код:

console.log('Работает в браузере');

Результат отображается в консоли инструментов разработчика браузера.

Ограничения:

Невозможность использовать модули Node.js (require/import).
Зависимость от интернета.

Как организовать проект с модулями и автоматической сборкой?

Vite – быстрая среда сборки для JavaScript-проектов. Устанавливается через npm (требует Node.js).

Создание нового проекта:

npm create vite@latest my-project -- --template vanilla

Переход в каталог и установка зависимостей:

cd my-project
npm install

Запуск сервера разработки:

npm run dev

Ошибки:

npm не найден – необходимо установить Node.js.
Ошибка порта – изменить порт в конфигурации Vite.

Какая альтернатива Node.js и как её установить?

Deno – современная среда выполнения JavaScript и TypeScript, разработанная создателем Node.js. Установка проста: скачать бинарный файл с deno.land или через менеджер пакетов.

На macOS/Linux через curl:

curl -fsSL https://deno.land/install.sh | sh

Проверка:

deno --version

Запуск скрипта:

deno run app.js

Отличия:

Доступ к файловой системе и сети по умолчанию запрещён – требуются флаги --allow-read и --allow-net.
Меньшее количество готовых модулей по сравнению с npm.

Расширенные примеры установки и настройки

Установка нескольких версий Node через nvm и переключение

Пример установки двух версий Node (16 и 20) и переключения между ними.

Пример

nvm install 16
nvm install 20
nvm use 16
node --version

v16.20.0

Пример

nvm use 20
node --version

v20.9.0

Список установленных версий: nvm ls

Создание HTTP-сервера на Node.js

Простой сервер, обрабатывающий запросы и возвращающий HTML.

Пример

const http = require('http');
const server = http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('Hello from Node.js');
});
server.listen(3000, () => {
    console.log('Сервер запущен на порту 3000');
});

Сервер запущен на порту 3000

После запуска открыть в браузере http://localhost:3000 – увидеть заголовок.

Использование Vite для проекта с React

Создание нового React-приложения через Vite.

Пример

npm create vite@latest react-app -- --template react
cd react-app
npm install
npm run dev

  VITE v5.0.0  ready in 300ms
  ➜  Local:   http://localhost:5173/

Открыть http://localhost:5173 – стандартное React-приложение.

Запуск скрипта Deno с доступом к сети

Скрипт, который делает HTTP-запрос и выводит заголовок.

Пример

// fetch_example.js
const response = await fetch('https://api.github.com');
const data = await response.json();
console.log(data.current_user_url);

Пример

deno run --allow-net fetch_example.js

https://api.github.com/user

Флаг --allow-net необходим для доступа к сети.

Установка TypeScript и компиляция в JavaScript

TypeScript устанавливается глобально через npm.

Пример

npm install -g typescript
tsc --version

Version 5.3.2

Пример

// hello.ts
const greet = (name: string): string => `Привет, ${name}!`;
console.log(greet('Мир'));

Пример

tsc hello.ts
node hello.js

Привет, Мир!

Команда tsc преобразует TypeScript в JavaScript перед выполнением.

Установка JavaScript - comments

установка js (javascript)