TypeScript: как оптимизировать цикл compile-bundle-reload? - PullRequest
Новая
       13

TypeScript: как оптимизировать цикл compile-bundle-reload?

0 голосов
/ 28 апреля 2018

Я только что создал тривиальный проект TypeScript с React & Webpack, и цикл edit-build-reload-test не идеален, так как мне нужно

  1. Перестроить вручную с помощью npm run build:dev
  2. Подождите 9 секунд для tsc && webpack app.js -o app.bundle.js --mode=development
  3. Обновите браузер.

Коллеги, какие методы вы используете, чтобы ускорить рабочий процесс? (решения не для веб-пакетов приветствуются!)

Ответы [ 2 ]

0 голосов
/ 30 апреля 2018

Я только что узнал о Посылке . На сегодняшний день это самый простой способ получить быстрый рабочий процесс ...

enter image description here

Просто добавьте ссылку <script src="app.tsx"></script> в ваш HTML-файл и затем запустите parcel index.html (или что-то еще). Parcel

  1. Проверяет, есть ли у вас package.json, а если нет, создает его для вас
  2. Устанавливает TypeScript (с --save-dev), если вы используете этот язык
  3. Устанавливает React или Preact, если вы импортировали один из них
  4. Создает пакет вашего приложения с зависимостями в папке dist
  5. Служит вашему приложению на http://localhost:1234
  6. Отслеживает изменения кода и перекомпилирует (менее чем за 200 мс для крошечного приложения)
  7. Автоматически заменяет веб-браузер при замене горячего модуля.
0 голосов
/ 28 апреля 2018

Вы можете использовать ts-loader (или awesome-typescript-loader ), чтобы разрешить webpack обрабатывать ваши файлы машинописи.

Кроме того, веб-пакет может быть запущен с опцией --watch, которая позволяет веб-пакету отслеживать изменения файлов и автоматически перестраивать пакет

Веб-пакет может просматривать файлы и перекомпилировать их при каждом изменении.

В этом случае ваш скрипт build: dev будет webpack app.js -o app.bundle.js --mode=development --watch (без запуска tsc)

PS. Вы также можете ускорить фазу обновления, включив Горячая замена модуля , поэтому вам не нужно перезагружать страницу вручную (это может даже сохранить состояние), но это потребует некоторых изменений в кодовой базе (для реагирования , response-hot-loader рекомендуется), хотя для этого потребуется дополнительно использовать babel-loader в конфигурации вашего веб-пакета.

...