andrejtop/babel

Домашнее задание к лекции «Рабочее окружение»

Важно: каждая задача выполняется в виде отдельного проекта с собственным GitHub репозиторием.

В личном кабинете на сайте netology.ru в поле комментария к домашней работе вставьте ссылки на ваш GitHub-проекты.

---

npm package

Легенда

Итак, вы решили организовать разработку игры с использованием правильных инструментов, а именно что проект нужно создавать с помощью npm, управлять зависимостями и сборкой тоже с его помощью.

Описание

Создайте проект на GitHub-проект, после чего с помощью npm init сгенерируйте package:

1. package name - defender-game
2. version - 1.0.0
3. description - "Browser based game"
4. entry point - index.js
5. test command - оставьте пустым
6. git repository - URL вашего GitHub репозитория
7. keywords - game
8. author - ваше имя или псевдоним
9. license - ISC

Добавьте .gitignore, который мы для вас приготовили.

---

Babel

Легенда

Как вы уже видели, некоторые проекты требуют для своей работы совместимости с текущей поддерживаемой версией языка. Но при этом есть большое желание использовать новейшие возможности ES. И для этого есть специальный инструмент, который позволяет осуществлять компиляцию кода на ES6+ в поддерживаемые на данный момент возможности - Babel. Поэтому вы приняли следующее решение: писать всё на новейшей версии языка и с помощью Babel обеспечить себе наибольшее количество пользователей.

Описание

Ваша задача подключить Babel к проекту и настроить сборку с его использованием.

1. Установите Babel (npm install --save-dev @babel/core @babel/cli @babel/preset-env).

2. Установите CoreJS (npm install core-js@3).

3. Настройте скрипт запуска build для сборки с помощью npm. Для этого в секции scripts файла package.json пропишите:

{
    ...
    "scripts": {
        ...
        "build": "babel src -d dist"
        ...
    }
}

3. Создайте конфиг babel.config.json и пропишите @babel/preset-env:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "3.22"
      }
    ]
  ]
}

4. Создайте файл src/app.js со следующим содержимым:

const characters = [
  {name: 'мечник', health: 10},
  {name: 'маг', health: 100},
  {name: 'маг', health: 0},
  {name: 'лучник', health: 0},
];

const alive = characters.filter(item => item.health > 0);

5. Удостоверьтесь, что проект собирается, если в консоли запустить команду npm run build, и в каталоге dist формируется преобразованный Babel код.

6. Добавьте каталог dist в .gitignore.

---