Babel и TypeScript: Настройка

Технические требования

Для этого урока на вашем компьютере должно быть установлено следующее:

• Node.js и npm . Вы можете скачать их с https://nodejs.org/en/download/ . Если они у вас уже установлены, убедитесь, что версия Node.js не ниже 8.2, а npm — не ниже версии 5.
• Редактор кода, например Visual Studio Code . Его можно установить с https://code.visualstudio.com/ .
• Стартовый проект.
• После загрузки стартового проекта. Откройте его в редакторе кода и выполните следующую команду в окне терминала:

npm install

Это установит зависимость проекта — TypeScript.

Понимание необходимости Babel

Babel — популярный инструмент, который в основном используется для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript в текущих и старых браузерах или средах. Он также может конвертировать код TypeScript в JavaScript.

Зачем вам использовать Babel для транспиляции TypeScript, если компилятор TypeScript уже делает это? Что ж, Babel способен конвертировать JSX в JavaScript, а компилятор TypeScript этого сделать не может.

Итак, если ваш проект создан с использованием React, вам понадобится Babel. Если проект уже использует Babel, проще взять на себя всю ответственность за всю транспиляцию. Это позволяет TypeScript сосредоточиться на том, в чем он лучше всего справляется — проверке типов.

Добавление Babel в проект

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

• В окне терминала давайте установим Babel с необходимыми плагинами в качестве зависимости для разработки:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript @babel/cli

Вот объяснение пакетов, которые мы только что установили:

• @babel/core: Как следует из названия, это основная библиотека Babel.
• @babel/preset-env: это набор плагинов, которые позволяют нам использовать новейшие функции JavaScript, но при этом ориентированы на браузеры, которые их не поддерживают.
• @babel/preset-typescript: это набор плагинов, которые позволяют Babel преобразовывать код TypeScript в JavaScript.
• @babel/cli: Это инструмент командной строки Babel, который мы будем использовать для запуска Babel.

Babel настраивается в файле с именем .babelrc.

• Создадим .babelrc в корне нашего проекта файл следующего содержания:

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

Эта конфигурация сообщает Babel использовать установленные нами плагины.

Какое изменение нам нужно внести tsconfig.json, чтобы TypeScript прекратил транспиляцию? Внесите это изменение.

Мы можем добавить noEmit опцию компилятора.

{
  "compilerOptions": {
    ...
    "noEmit": true
  },
  ...
}

• Давайте создадим npm-скрипт для запуска Babel package.json:

"scripts": {
  ...
  "babel": "babel src/index.ts --out-file dist/bundle.js"
},

Мы сказали Babel транспилировать index.tsи поместить сгенерированный JavaScript в bundle.js файл в dist папке.

• В окне терминала давайте запустим наш babel скрипт npm:

npm run babel

В папке dist создается bundle.js.

Краткое содержание

Если требования к транспиляции выходят за рамки компилятора TypeScript, мы можем использовать Babel для транспиляции и TypeScript для проверки типов.