Рубрики
Без рубрики

Как модули ES получили переопределенную веб-разработку

Мир уходил от пакета блинчика и к импорту динамического модуля. Давайте посмотрим последние тенденции и то, что они подразумевают для нас. Помечено JavaScript, WebDev.

Вы знаете вдохновляющую фразу «Скейт туда, где проходит шайба? ” Ну, в веб-разработке … Похоже, что шайба телепортируется через каток на Маха 30 иногда.

Вот как я почувствовал погружение в работу модулей ES. Оказывается, было несколько огромных смещений прямо под моим каркасным носом в последние несколько лет. Открыв, что это Действительные JS во всех основных браузерах …

const js = await import('script.js')

… Я должен был сделать пост об этом. Итак, давайте рассмотрим

  1. 🥞 Мои неправильные представления о том, какие булочки делают в эти дни
  2. 🧩 Какие модули ES + динамический импорт сможет сделать
  3. 🚀 Как инструменты сборки развиваются для эпохи после т. Е.

Далее!

Вперед: Персональные заблуждения в мире WebPack

Что я делюсь здесь, вероятно, для некоторых знаний. HECK, импортные модули JavaScript скрывались в Ecmascript стандартный С 2017 года Действительно Но если вы использовали «традиционный» проект, как Create-raction-app Долгое время вы можете подумать, что старого школы, как работает мир.

Так что позвольте мне ahem. Распакуйте традиционное определение «объединения». Короче говоря, это концепция принимать цепочку файлов JS, как это:

// toppings.js
export {
  blueberries: async () => await fetch('fresh-from-the-farm'),
  syrup = "maple",
}

// ingredients.js
export { flour: 'white', eggs: 'free-range', milk: '2%', butter: 'dairy-free' }

// pancake.js
import { blueberries, syrup } from './toppings'
import { flour, eggs, milk, butter } from './ingredients'

const pancake = new Pancake()

pancake.mixItUp([ flour, eggs, milk, butter ])
pancake.cook()
pancake.applyToppings([ blueberries, syrup ])

И «выравнивать» цепи импорта/экспорта в большой пакет Bancake 🥞

// bundler-output-alksdfjfsadlf.js
const toppings__chunk = {
  blueberries: async () => await fetch('fresh-from-the-farm'),
  syrup = "maple",
}

const ingredients__chunk = { flour: 'white', eggs: 'free-range', milk: '2%', butter: 'dairy-free' }

const { blueberries, syrup } = toppings__chunk
const { flour, eggs, milk, butter } = ingredients__chunk
const pancake = new Pancake()

pancake.mixItUp([ flour, eggs, milk, butter ])
pancake.cook()
pancake.applyToppings([ blueberries, syrup ])

Таким образом, мы сжимаем все файлы JavaScript, которые мы развиваем в одинокий Файл для браузера, чтобы потреблять. Вернувшись в веб-разработку 2015 года, это действительно единственный способ снять «импортировать» один файл JS в другой. Импорт не был даже действительным JavaScript! Это было просто какое-то аккуратное хитрость, которое создает инструменты, такие как WebPack, могут подобрать и понять.

Но молча, в глубинах ES Spec, Импорт и Экспорт синтаксис сделал стать действительным JavaScript. Почти в ночь, стало возможным оставить все ваши импорт и Экспорт заявления в вашем коде или даже придурок Ritch Your Js Bundler полностью 😨.

Эта инновация стала тем, что мы называем модули.

Модули ES

Есть Глубокая статья от MDN На этой теме это хорошо стоит читать. Но вкратце, «модули ES» (иногда обозначены .mjs файлы ) являются файлами JavaScript с некоторыми экспортированными значениями для других для импорта и использования. Пока вы загружаете свои «входные» файлы с Тип = "Модуль" атрибут:

Этот файл готов к импорт Все другие скрипты хотят! Ну, пока эти другие скрипты существуют в сборке вашего проекта, конечно, мы проигнорируем проблемы CORS for).

Эта концепция импорта того, что нужно за «увлекательно все вещи» имеет несколько хороших преимуществ:

  1. Вам не нужно загружать и разбирать все спереди По умолчанию ничего импорт Эд это «Отсрочить» для загрузки по мере необходимости Отказ Другими словами, ваш компьютер не будет превращаться в истребитель, пытаясь загрузить JS, когда вы впервые посетите свой веб-сайт.
  2. Необходимость инструментов, как WebPack может (однажды) исчезает ✨ Принести браузеры ближе к тому, как Люди Написать их код – огромная победа для новичков и плюсов 🏆

Динамический импорт делает его еще дальше

Динамический импорт – это специфическая сторона модулей ES, которые Действительно сделать вещи интересными. Как Эта статья из команды V8 Описывает (создатели двигателя рендеринга Google Chrome), A Динамический импорт Является ли асинхронная выборка для некоторых JavaScript, когда вам это нужно.

Это очень похоже на извлекать API В таком виде! Но вместо того, чтобы схватить немного JSON или простого текста , мы хватаем какой-то реальный, исполняемый файл код, который мы хотим запустить.

Все, что вам нужно, это скромный одноклассник:

const lookAtTheTime = await import('./fashionably-late.js')

… а ты только что схватил все экспорт с этого файла. Загрузка JS на лету, как это имеет тонна преимуществ, если вы работаете с Приложения для одиночных страниц как Nextjs или Create-React-App . Команда V8 предложила эту элегантно простую маршруту на стороне клиента, только загрузка нужна JS, когда вы нажимаете на ссылку:

const links = document.querySelectorAll('nav > a');
for (const link of links) {
  link.addEventListener('click', async (event) => {
    try {
      // go grab whatever JS the route may need
      const module = await import(`${event.target.href}/script.mjs`);
      // The module exports a function named `loadPageInto`,
      // Which might render some HTML into the body
      module.loadPageInto(document.body);
    } catch (error) {
      document.body.innerHTML = `
        
404 page not found

      `
    }
  });
}

Я в основном просто реализовал роутер в 10 строк кода. (Да, это a Серьезные Завершение, но это ближе, чем вы думаете).

Это падает в Код разделить , ака загрузка “компонентов” (или модулей) кода всякий раз, когда пользователь нуждается в них. Вернувшись в темные века связки все-то-то-вещей, вам придется загрузить все эти компоненты спереди. Это может означать Тысячи строк мертвого кода!

Так что подождите, это 2021 … Почему все мои инструменты выглядят одинаково?

Это было, безусловно, мой первый вопрос, когда я читаю на этом. Я недавно окончил Create-raction-app к Nextjs Как моим реагированным бойцевым расписанием, но все еще есть тот же рабочий процесс конфигурации + пучок, чтобы подумать о 🤷♀️

Многие из этого просто проклятие абстракции. Глядя под капотом, эти инструменты сделали Отличный Спущется, поскольку модули ES ударили на сцену. А именно, такие инструменты, как Nextjs, могут волшебным образом «разделить» ваше приложение React в кусочки размером с укусом, которые загружаются как необходимо. Это означает:

  • Загрузите только JS для страницы Когда вы на самом деле посетите эту страницу
  • Только загружать компоненты реагирования когда им на самом деле нужно отображать
  • (бонус) Предварительная доставка JS Когда кто-то Скорее всего понадобиться. Это более продвинутая функция ( задокументирована здесь ), но это позволяет вам делать всевозможные сумасшествия; сказать, захватывающие ресурсы для страницы, когда вы наведите курсор на ссылку

Есть также преимущество обратная совместимость при использовании Bundler. Например, Internet Explorer не имеет концепции «модулей» или «импортных» отчетов, поэтому любая попытка разделения кода взорвется в вашем лице 😬 Но с мета-структурой, такими как Nextjs на вашей стороне, вы можете полифилировать такие случаи использования, не думая об этом.

Приближается к возрасту после т. Е.

Если вы не слышали, главное объявление отправляло рябь через веб-сообщество Web DEV: Microsoft официально упадет, т.е. 11 поддержка его продукции в августе 2021 года 😱.

Многие обрабатывают это как TimeBomb TimeBomb для поддержки устаревших браузеров. Когда он уходит … Мы можем быть в безопасности, чтобы потерять наши многолифики на благо. Да, определенные сайты для правительств и внутренних деловых операций, вероятно, будут придерживаться их PHP-оружива. Но для нас, кровоточащиеся разработчики, у нас может быть целый новый грабеж, чтобы исследовать 🚀

Мир боковов, которые … не пучок

Приливы, безусловно, сместились в сообществе ДЖС в прошлом году. С перспективой сброса полифимов и агрессивных объединений на добру люди начали обращаться к реальный Причины, по которым вы хотите Bundler:

  • Обработать всю вашу фантазию, что не Действительные JS. Думайте JSX для компонентов React, Teadercript для проверки типа, компонентов в стиле, модулях CSS для CSS-in-js и т. Д.
  • Чтобы раскрутить ваше приложение локально. Вы всегда можете открыть HTML-файлы непосредственно в вашем браузере, но вы потеряете всю эту немедленную обратную связь! Вы должны увидеть все ваши новые JS и CSS Millisecond, которую вы попали в «Сохранить».
  • Оптимизировать код для производства. Вы, вероятно, захотите некоторую последнюю минуту зачистки для дополнительной скорости, например, удаление console.log S, миниятирующее все, отвлекая, и так далее.

Из-за этого изысканного набора функций новая волна процессоров JS просто называет себя «сборки инструментов», чтобы оставаться более обобщенными.

Снежный покров На самом деле это то, что заставило мяч с моей точки зрения. Они обещают все точки продажи, которые я перечислил выше, плюс абсолютная самая быстрая живая перезагрузка в Биз. Это в основном из-за этого кодового расщепления, которую я упоминал ранее. Поскольку они оставляют все эти модули и динамический импорт в такте, Они избегают повторной обработки JavaScript, которые не изменились. Поэтому, если вы только что обновили одному компоненту реагирования, он переработает эти 10 строк кода и взорвать его на страницу в Flash ⚡️

Vite Является ли главным претендентом к примечанию. Этот был возглавлен Эван ты (Оверлорда Vuejs) для решения подобной функции, установленной на SnowPack. Далеко слишком рано говорить, я бы ?| Предпочитаю Эта настройка в SnowPack, но Вот приятная сравнительная часть Если вы рассматриваете либо для серьезных приложений.

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

Призыв к действию: Исследуйте эти новые инструменты сборки!

Это определенно стоит ваше время, чтобы взбить песочницу и начать компилировать некоторый код. Вите create-app инструмент Это отличный для этого новичка дружелюбие, с вариантами использования любых основных фреймворк вне коробки (реагировать, Vue, Svelte и даже Lit Element !).

Я был пойман от охранника, чтобы найти Там нет каталога сборки при работе в развитии. Код ваш напиток сопоставлен на браузер напрямую, обработанный на лету, когда вы экономите ❤ ️

Так что иди и посмотрите, что похоже на будущее! С любой удачей мы доберемся до нашего пакета блинчики и съесть его тоже 😁

Узнайте немного чего-нибудь?

Потрясающий. Если вы пропустили это, я запустил Мой “Web Wizardry” рассылка Чтобы исследовать больше знаний наггетс, как это!

Эта вещь снимается «Первые принципы» веб-разработки. Другими словами, каковы все API в браузере Janky, Bent CSS и полудодаемый HTML, который делает все наши веб-проекты Tick? Если вы хотите пойти за рамки Этот для вас, дорогой веб-колдун 🔮

Подписаться прямо здесь Отказ Я обещаю всегда учить и никогда не спам ❤ ️

Оригинал: “https://dev.to/bholmesdev/how-es-modules-have-redefined-web-development-2hc6”

Читайте ещё по теме: