Рабочий процесс транспортера JavaScript / TypeScript - PullRequest
0 голосов
/ 01 мая 2018

Мой рабочий процесс с JS / HTML всегда был

  1. написать код
  2. перезагрузить сайт
  3. исправление ошибок / настройка кода
  4. Перейти к 2

Все мои проекты все еще находятся в AngularJS 1.x, и я боюсь, что мне нужно перейти к рабочему процессу TypeScript-cli-transpilation.

Я действительно не понимаю этого. Я всегда видел огромную выгоду от возможности нажать F5, а затем увидеть результат кода JavaScript.

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

Я что-то упустил? Как должен выглядеть рабочий процесс?

Это не обязательно сфокусировано на Angular 2+, так как другие фреймворки, похоже, тоже хотят компилироваться.


Около 90% моего JavaScript-кода происходит в редакторе, который имеет отличную SFTP-поддержку, поэтому я встраиваю SFTP в машину для разработки и редактирую HTML / JS вживую на этом сервере разработки. У меня есть как минимум три дюжины программных серверов на трех машинах, все с очень чистой структурой каталогов для каждого проекта / сервера, поэтому мне просто нужно выбрать каталог в редакторе, начать редактирование файлов и перезагрузить их в браузере.

Для переключения на CLI потребуется, чтобы CLI-сервер адаптировался к существующей структуре каталогов, чтобы CLI-сервер работал рядом с сервером, на котором фактически размещены HTML / JS-файлы. Затем он каким-то образом должен скомпилировать измененные файлы и поместить их в каталог, где я обычно просто продолжаю редактировать файл.

Моя структура обычно выглядит следующим образом

/project1/data/log.txt
               uploaded.jpg
         /python/server.py
                /server_handler_1.py (auto-reloads)
                /server_handler_2.py (auto-reloads)
                /html/page1.html
                      page2.html
                /scripts/script1.js
                         script2.js
                /static/image1.png
                        image2.png

Затем, когда все будет сделано, я отправлю его через rsync на целевой сервер.

Я очень редко кодирую веб-проекты на локальной машине. Я не использую IDE или «современные» текстовые редакторы, в основном из-за отсутствия хорошей поддержки SFTP, а также из-за их производительности.

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

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

По сравнению с вашим исходным рабочим процессом вы можете наложить слой так:

Компиляция в режиме просмотра

Использовать опцию компилятора TypeScript --watch :

tsc --watch

Каждый раз, когда изменяется исходный файл *.ts, он будет постепенно перекомпилировать выходные файлы *.js. Теперь вы можете редактировать код, обновлять окно браузера и видеть изменения, как и раньше.

Используйте IDE, которая компилируется при сохранении

Многие IDE с поддержкой TypeScript, такие как Код Visual Studio и Atom , могут компилировать TypeScript в JavaScript каждый раз, когда вы редактируете файл. Опять же, теперь вы можете просто редактировать код и обновлять браузер, как вы делали это раньше, даже без необходимости использовать командную строку.

Использовать Webpack

Webpack - это пакет JavaScript. Сначала это будет довольно пугающим, но это мощный, гибкий и в настоящее время промышленный стандарт. Вы можете думать об этом как о настраиваемом инструменте сборки для разработки браузеров. У них есть руководство по настройке TypeScript . После того, как вы настроили веб-пакет для обработки TypeScript (используя ts-loader), вы можете запустить webpack-dev-server. Теперь изменения кода не только постепенно перекомпилируют TypeScript при сохранении (в памяти, а не в файловой системе), но также обновят окно браузера. В Webpack есть много хитростей, поэтому первоначальная настройка того стоит.

(угловой) Использование angular-cli

Для проектов Angular они предоставляют angular-cli, инструмент, построенный поверх Webpack, который делает процесс начальной настройки и разработки еще проще.

(Реакция) Использование react-create-app

Аналогично для проектов React они создали create-react-app, инструмент для запуска и запуска без особых настроек. Он имеет множество опций, которые упрощают настройку, например, вы можете легко добавить Flow , статическую систему типов, похожую на TypeScript, которая прекрасно работает с React, или вы можете использовать create-react-app-typescript, который является форком проекта, который включает TypeScript (который также отлично работает с React).


Заключение

Я знаю, откуда ты, я сам вспоминаю о простых днях веб-разработки, но, надеюсь, я убедил тебя, что сегодня есть несколько отличных инструментов, которые обеспечивают действительно хорошие рабочие процессы, даже лучше, чем раньше! Этот пост фактически только царапает поверхность.

0 голосов
/ 01 мая 2018

Вы можете продолжить тот же рабочий процесс. Компилятор машинописного текста (или, если вы используете Angular, компилятор Angular, использующий компилятор машинописного текста под капотом) имеет режим «наблюдения», поэтому он компилирует файлы TypeScript при их сохранении, что означает, что вы можете нажать F5 и увидеть ваши изменения.

Фактически, если вы используете Angular CLI, он автоматически обновляет веб-страницу при сохранении файла и компилирует результат, поэтому вам даже не нужно нажимать клавишу F5.

И если вы не используете Angular, вы можете запустить компилятор TypeScript в режиме watch, и он будет компилировать каждый файл машинописного текста при его сохранении:

tsc -w

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

...