Настройка рабочего окружения

Иногда может потребоваться выполнить компиляцию TypeScript кода с помощью одного компилятор tsc. Именно поэтому текущая глава посвящена его установке, конфигурированию и запуску. Кроме того, она расскажет как спрятать длинные команды, изобилующие различными флагами компилятора, за коротенькими, определенными в package.json.

Настройка рабочего окружения

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

Кроме того, html и css используют в чистом виде, по большей части только в образовательных целях. В реальных проектах используют их более продвинутые аналоги, как например jade или sass, которые так же, как TypeScript, нуждаются в компиляторах. Также приложения не обходятся без шрифтов, иконок и изображений, которые в целях оптимизации принято предварительно обрабатывать. Поэтому современный процесс разработки не представляется возможным без специализированных сборщиков, таких как webpack или gulp.

gulp относится к так называемым task runner’ам, использование которых требует императивного определения задач для каждого отдельного процесса, самостоятельной настройки отлова ошибок. В свою очередь webpack — это настоящий комбайн, конфигурирование которого больше напоминает декларативный стиль. Но поскольку книга посвящена языку TypeScript, текущая глава будет ограниченна рассмотрением сборки проекта при помощи одного компилятора tsc.

Сборка проекта с помощью tsc (TypeScript compiler)

Первым делом нужно создать директорию, в данном случае это будет директория с названием typescript-with-tsc содержащая две поддиректории src и dest. В первой будут находиться исходные файлы с расширением .ts, которые будут преобразованы в файлы с расширением .js и помещены во вторую директорию.

Теперь нужно открыть консоль в рабочей директории и выполнить инициализацию npm, в данном случае — ускоренную.

ts
npm init -y

На этот момент в директории должен появится файл package.json. После инициализации npm, установим компилятор TypeScript, выполнив в консоли следующую команду:

ts
npm i -D typescript

После успешной установки прежде всего нужно выполнить конфигурирование TypeScript. Для этого следовало бы выполнить в консоли:

ts
tsc init

Но, так как TypeScript установлен только локально, следует указать путь к нему:

ts
./node_modules/.bin/tsc --init

После этого в директории должен появится файл tsconfig.json, точную настройку которого можно произвести после прочтения главы, посвященной опциям компилятора (глава “Опции компилятора”), а пока просто укажем нужные настройки. В сгенерированном файле tsconfig.json будет очень много опций, большинство из которых закомментировано, но в итоге должно получиться не, что подобное:

ts
{ "compilerOptions": { "target": "es5", "module": "system", "outFile": "./dest/build.js", "rootDir": "./src" }, "exclude": [ "/node_modules/" ] }

Теперь можно приступить к dev сборке. Для этого нужно открыть файл package.json и в поле script прописать команды для пакетного менеджера npm.

ts
{ "name": "typescript-with-tsc", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "./node_modules/.bin/tsc --project ./tsconfig.json --watch", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "typescript": "^2.5.2" } }

Осталось только создать в директории src файл index.ts и запустить процесс разработки, выполнив в консоли команду:

ts
npm run build

После этого в папке dest должен появится скомпилированный index.js, а при изменении файлов в директории src преобразование должно запускаться автоматически. Сразу стоит обратить внимание на то, как именно компилятор понимает, какие файлы компилировать.

Для примера, создадим в директории src файл hello-world.ts, в котором объявим функцию, возвращающее приветствие.

ts
// Файл hello-world.ts export function getMassage(): string { return 'Hello World!'; }

Важный момент заключается в том, что компилятор не будет обращать на этот файл внимание, пока он не будет задействован в программе, то есть не будет импортировать в index.js

ts
import {getMassage} from './hello-world'; console.log(getMassage()); // Hello World!

Такое поведение называется Tree Shaking и если по каким-либо причинам его нужно переопределить, то для этого нужно поправить конфигурацию компилятора, определив параметр includes представляющий массив ссылок на файлы которые необходимо компилировать независимо от их использования проектом.

ts
{ "compilerOptions": { "target": "es5", "module": "system", "outFile": "./dest/build.js", "rootDir": "./src/" }, "include": [ "./src/__/*.ts" ], "exclude": [ "/node_modules/" ] }

Очень часто бывает так, что при разработке в коде используются библиотеки, которых не должно быть в конечной сборке. Можно было бы каждый раз переписывать конфигурационный файл tsconfig.json, но есть способ сделать это элегантнее. Разделение dev сборки от prod осуществляется путем создания ещё одного конфигурационного файла. Назовем его tsconfig.prod.json и поместим в корне проекта. Стоит добавить, что конфигурационные файлы можно размещать где угодно, главное при запуске компилятора указать путь к нужному конфигу с помощью опции --project. Если это не сделать, компилятор будет искать файл tsconfig.json в той директории из под которой он был запущен.

sh
tsc -b --project ./tsconfig.json

Или...

sh
tsc -b ./tsconfig.json

Или...

sh
tsc -b --project ./tsconfig.props.json

Или...

sh
tsc -b ./tsconfig.props.json

После того, как конфигурационный файл был создан и отредактирован требуемым образом, остается только создать команду для запуска prod сборки. Для этого снова откройте файл package.json и в свойстве script укажите команду запуска компиляции, только на этот раз укажите путь до tsconfig.prod.json. Единственное, на, что стоит обратить внимание, при финальной сборке не нужно указывать опцию --watch, которая заставляет компилятор отслеживать изменения в файлах и автоматически перезапускать сборку.

ts
{ "name": "typescript-with-tsc", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "./node_modules/.bin/tsc --project ./tsconfig.json --watch", "build:prod": "./node_modules/.bin/tsc --project ./tsconfig.prod.json", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "@types/react": "^16.0.5", "@types/react-dom": "^15.5.4", "react": "^15.6.1", "react-dom": "^15.6.1", "typescript": "^2.5.2" } }

Чтобы запустить сборку, нужно, как и прежде, выполнить команду в терминале, только на этот раз указать другое имя.

sh
npm run build:prod

Также не будет лишним упомянуть, что реальные проекты практически всегда изобилуют множеством конфигурационных файлов. Поэтому если у Вас возникает мысль, что один конфигурационный файл не удовлетворяет условиям нескольких сборок, даже не раздумывайте, создавайте отдельный конфигурационный файл. При этом не отбрасывайте вариант с расширением одного конфигурационного файла другим с помощью свойства extends, более подробно о котором можно узнать из главы посвященной опциям компилятора.