Перейти к содержанию

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

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

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

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

Но так как книга посвящена языку TypeScript, то прежде всего для большего понимания нужно рассмотреть сборку проекта с помощью только одного компилятора TypeScript. Но прежде, чем приступить, стоит уточнить несколько важных деталей. Первое, на что стоит обратить внимание — все устанавливаемые модули устанавливаются в проект локально. Кроме того, все проделывается на операционной системе Ubuntu, на которой настроен NodeJS.

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

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

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

npm init -y

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

npm i -D typescript

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

tsc init

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

./node_modules/.bin/tsc --init

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

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

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

{
  "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 и запустить процесс разработки, выполнив в консоли команду:

npm run build

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

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

// Файл hello-world.ts

export function getMassage(): string {
  return 'Hello World!'
}

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

import { getMassage } from './hello-world'

console.log(getMassage()) // Hello World!

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

{
  "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 в той директории из под которой он был запущен.

tsc
tsc --project ./tsconfig.json

// or

tsc --project ./tsconfig.props.json

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

{
  "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"
  }
}

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

npm run build:prod

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