Модули в JavaScript

[iliazeus]

В современном JavaScript осталось два основных стандарта модульных систем.

А что случилось с AMD?

[arxanter]

Давно не видел, чтобы его использовали в проектах. Считаете, есть потребность описать и его синтаксис?

[iliazeus]

Я работал, в основном, с Node.js, поэтому о чем-то, отличном от CommonJS и ESM, слышал только краем уха. Если он не используется, то, думаю, незачем.

[monochromer]

Подробнее об этом процессе можно прочитать в статье «Глубокое погружение в ES-модули в картинках».

Так же статья, но грузится быстрее и меньше весит.

[arxanter]

Спасибо, подправил ссылку

[simple_mortal]

Бардак в JS с модулями. Бардак. Писал тулзу на тс, вебпаком собрал, оказывается нельзя просто так взять и заимпортить без нпм этот скрипт. Пошёл читать что с этим делать, выяснилось, что нужно делать кучу бандлов для разных случаев, типа для импорта скрипта в браузер одно, для работы с вебпаком второе, ещё что-то… Короче, ужас. Если у кого есть статейка нормальная про импорты и конкретно про правильную упаковку либы в вебпаке для всех случаев, то буду признателен.

[arxanter]

Хотел сделать в этой статье раздел про Webpack, но базовая часть про модули получилось большой и решил разделить их на две. Поэтому планирую после Нового года дооформить вторую часть про работу с модулями в Webpack и трюки при работе с Jest( моки, прокидывание alias и т.д.) Если планы не изменятся)

[ValeriyFilatov]

хорошо бы еще упомянуть про Rollup & Snowpack

[arxanter]

Хорошо, c Rollup и Parcel есть небольшой опыт. О Snowpack не слышал, почитаю)

[uid11]

function counter() { /* ... */ }

export counter;

Судя по стандарту (https://tc39.es/ecma262/#prod-ExportDeclaration), такого синтаксиса ведь нет?

Если переменная уже объявлена, экспортировать её под каким-то именем можно только через синтаксис именованных экспортов, в фигурных скобках:

export { counter };

Аналогично и в следующем отрывке (без фигурных скобок будет синтаксическая ошибка):

function counter() { /* ... */ }

export counter as rainbowCounter;

Дублирование дефолтных (или именованных) экспортов тоже является синтаксической ошибкой (https://tc39.es/ecma262/#sec-module-semantics-static-semantics-early-errors):

const awesomeValue = 42;

export { awesomeValue as default };

export default function counter() { /* ... */ }
export default  class User { /* ... */ }

Хотя webpack, заменяя эти экспорты на свои внутренние CommonJS-экспорты, фактически убирает эту ошибку.

[arxanter]

Спасибо большое, за дельные замечания!!! Действительно, мои примеры, указанные выше, некорректны, в течение дня подправлю статью. Буду внимательнее проверять все примеры в след. раз!