- Оригинальный адрес:How to JavaScript in 2018
- Оригинальный автор:Tara Z. Manicsic
- Перевод с:Программа перевода самородков
- Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
- Переводчик:llp0574
- Корректор:MechanicianW,ParadeTo
Как играть в JavaScript в 2018 году
От инструментов командной строки и веб-пакетов до TypeScript и Flow и многого другого — давайте поговорим о том, как играть в JavaScript в 2018 году.
Многие люди, включая меня, былиГоворя об усталости от JavaScript. По-прежнему существует множество способов написания приложений на JavaScript, но с большим количеством инструментов командной строки, выполняющих большую часть тяжелой работы, компиляция становится менее важной, а TypeScript пытается уменьшить количество ошибок типов, поэтому мы можем относиться к этому немного проще.
Примечание. Этот пост в блоге является частью нашего официального документа "Будущее JavaScript: 2018 год и далее", в котором описывается наш анализ будущего JavaScript и прогнозы относительно текущей ситуации.
инструмент командной строки
Большинство библиотек и фреймворков имеютинструмент командной строки, строка команд может настроить структуру проекта и быстро создать ожидаемый контент. Эта практика обычно состоит из команды запуска (иногда с автозагрузчиком), команд сборки, тестовых структур и т.д. Эти инструменты могут уменьшить количество избыточных файлов при создании новых проектов. Давайте посмотрим, что некоторые инструменты командной строки помогут нам уменьшить.
Конфигурация веб-пакета
Настройка процесса сборки веб-пакета и реальное понимание того, как он работает, может стать одним из самых сложных этапов обучения в 2017 году. К счастью, один из основных участников webpackSean Larkin, происходит вездеотличная речь, и предоставитьОчень интересный и полезный урокучи нас.
Многие фреймворки в наши дни не только создают для вас конфигурационные файлы webpack, они даже помещают их туда, где вам вообще не нужно смотреть 😮.Инструменты командной строки для VueЕсть дажеопределенные шаблоны веб-пакетов, который обеспечивает полнофункциональную настройку веб-пакета. Чтобы дать вам полное представление о том, что предоставляет инструмент командной строки, вот Vue CLI Контент, содержащийся в шаблоне, напрямую взят из официального репозитория:
-
npm run dev: Желателен опыт разработки- Используйте Webpack+ для однофайловых компонентов Vue
vue-loader - Зарезервированное состояние горячей перезагрузки
- Ошибка компиляции перезаписывает зарезервированное состояние
- ESLint вызывается при сохранении файла
- отображение исходного файла
- Используйте Webpack+ для однофайловых компонентов Vue
-
npm run build: Производство готово к сборке- использоватьUglifyJS v3Сократить JavaScript
- использоватьhtml-minifierСжать HTML
- Извлеките CSS для всех компонентов в отдельный файл и используйтеcssnanoкомпрессия
- Статические ресурсы, скомпилированные с хэшами версий, используются для эффективного долгосрочного кэширования, а рабочий файл index.html создается автоматически, указывая на эти ресурсы с правильным URL-адресом.
- использовать
npm run build --reportСборка для анализа размера упаковки
-
npm run unit: существуетJSDOMиспользуется вJestПробежать модульные тесты, или в фантомах с кармой + моча + карма-учебник- В поддержке тестового файла ES2015 +
- простое моделирование данных
-
npm run e2e: использоватьNightwatchПроведите сквозное тестирование- Запускайте тесты параллельно в нескольких браузерах
- Однострочная команда работает из коробки:
- Автоматически обрабатывать зависимости Selenium и chromedriver
- Автоматически генерировать сервер Selenium
с другой стороны,preact-cliОтвечает за стандартный функционал webpack. Если вам нужна пользовательская конфигурация веб-пакета, просто создайте ееpreact.config.jsфайл, который выведет функцию для внесения изменений в ваш webpack. Столько инструментов, столько помощи, разработчики помогают друг другу 💞.
Включить или выключить Babel
Вы понимаете? Звучит как Вавилон 😂. Я не мог сдержать смех. я нетнастоящийЧтобы соединить Вавилон и древний город Вавилон, ноОбсуждатьСказать, что это может действительно устранить нашу зависимость от компиляции. За последние несколько лет Babel действительно был очень популярен, потому что мы хотим, чтобы ECMAScript Все флэшки представлены, но не хочется ждать поддержки медленных браузеров. Поскольку выпуски ECMAScript замедляются, поддержка браузеров может наверстать упущенное. без большогоКангакс совместимостьКак диаграмма может быть статьей JavaScript?
Картинки этих графиков выглядят не так читабельно, потому что все, что я хочу сказать, это то, что они почти все зеленые! Для получения полной информации просто нажмите на ссылку под изображением, чтобы подробно изучить эти диаграммы.
Красные блоки слева на первой диаграмме — это компиляторы (например, es-6 shim, Closure и т. д.) и старые браузеры (например, Kong 4.14 и IE 11 и т. д.). Затем пять красных блоков справа — это серверы или компиляторы, такие как PJS, JXA, Node 4, DUK 1.8 и DUK 2.2 и т. д. На нижнем изображении то, что выглядит как собака, смотрящая на красную часть загроможденного восклицательного знака, — это сервер или среда выполнения, которая поддерживает только Node 6.5+. Состав красного квадрата слева — это поддержка компилятора или полифила и IE 11. важнее,Посмотрите на эти зеленые части!В самых популярных браузерах мы видим почти все из них зеленого цвета. 2017 Единственные функции, отмеченные красным, — это поддержка ESR для разделяемой памяти и атомизации в Firefox 52.
С другой точки зрения, изВикипедияПолучите процент использования определенного браузера.
Что ж, может пройти много времени, прежде чем Babel будет отключен, так как мы все еще делаем все возможное, чтобы сделать наше приложение доступным для пользователей со старыми браузерами. Интересно подумать, что мы могли бы избавиться от этого дополнительного шага. Знаете, как раньше, когда мы не использовали компилятор 😆.
Обсудить TypeScript
Если мы говорим о том, как играть с JavaScript, то мы должны говорить оTypeScript. TypeScript вышел из Microsoft Studios пять лет назад, но в 2017 году он стал крутым языком 😎. На нескольких конференциях нет доклада «почему мы любим TypeScript», это как сердцеед нового разработчика. Вместо того, чтобы прославлять TypeScript в этой статье, давайте обсудим, почему он так важен.
Для каждого разработчика, который хочет использовать типы в JavaScript, TypeScript предоставляет строгий расширенный набор синтаксиса JavaScript с дополнительной статической типизацией. Если вы испытаете это, это довольно круто. Конечно, если посмотретьСостояние JavaScript, кажется, что большое количество разработчиков действительно любят это делать.
Чтобы найти это прямо из источника, взгляните на эту цитату Брайана Терлсона:
Как парень, который придумал типы для JavaScript в 2014 году: я не верю, что типы появятся в ближайшем будущем. С точки зрения стандартов это очень сложный вопрос. Конечно, для пользователей TypeScript было бы здорово просто принять TypeScript в качестве стандарта, но есть и другие типы надстроек JS, включая компиляторы закрытия и поток. Все инструменты ведут себя по-разному, и даже не ясно, есть ли общее подмножество (я не думаю, что это имеет какой-то очевидный смысл). Я совершенно не уверен, как должен выглядеть стандарт типов, я и другие продолжим исследовать это, поскольку это очень полезно, но не ожидайте прорыва в ближайшее время. -HashNode AMA with Brian Terlson
TypeScript ❤ s Flow
В 2017 году вы, возможно, видели многоСообщение блогаОбсудите комбинацию TypeScript + Flow.Flowэто статическая проверка типов, разработанная для JavaScript. Как вы можете видеть на графике обзора состояния JavaScript выше, почти столько же людей заинтересованы в Flow, сколько и нет. Что еще интереснее, статистика также показывает, сколько опрошенных до сих пор не слышали об этом. Поток ⏰. Когда люди узнают больше о Flow в 2018 году, они откроют для себя Flow иMinko GechevТак же полезно:
TypeScript & Flow устраняет 15% производственных ошибок! Все еще думаете, что система типов бесполезна?t.co/koG7dFCSgF
— Минко Гечев (@mgechev)December 11, 2017
Угловой ❤ с TypeScript
Кто-то мог заметить, что весь пример кода в документации Angular написан на TypeScript. В какой-то момент вы могли выбрать учебники на JavaScript или TypeScript, но, похоже, Angular начал менять свое отношение. На диаграмме соединения между Angular и JS ниже видно, что на самом деле больше пользователей подключают Angular к ES6 (TypeScript: 3777, ES6: 3997). В 2018 году мы увидим, повлияют ли все эти факторы на Angular.
Чтобы получить профессиональный совет о том, как правильно выбрать JavaScript-фреймворк для вашего следующего приложения, взгляните наэта большая белая бумага.
Излишне говорить, что то, как мы пишем JavaScript, изменится в 2018 году. Как программисты, мы любим создавать и использовать инструменты, облегчающие нашу работу. К сожалению, это иногда приводит к большей путанице и слишком большому количеству вариантов. К счастью, инструменты командной строки помогают нам избавиться от рутинной работы, а TypeScript угодил разработчикам, которых раздражают ошибки типов.
Будущее JavaScript
Хотите подробно узнать, куда мы движемся в JavaScript? Ознакомьтесь с нашей новой статьей «Будущее JavaScript: 2018 и последующие годы».
Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.