Узнайте основы системы модуля JavaScript и постройте собственную библиотеку

Автор оригинала: FreeCodeCamp Community Member.

Камлес Чаннани

В последнее время мы все много услышали о «JavaScript Modules». Каждый, вероятно, задается вопросом, что с ними делать, и как они даже играют жизненно важную роль в нашей повседневной жизни …?

Так Что такое HEC, это система модулей JS? ?

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

Почему важно понять систему модуля JS?

Позвольте мне рассказать вам историю.

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

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

У этого подхода имелись некоторые преимущества:

• Если в основной библиотеке было несколько изменений, то изменилось только в одном месте без рефакторов всех приложений «код» для того же.
• Все приложения остались в синхронизации. Всякий раз, когда было сделано изменение, все приложения просто необходимо для запуска команды «NPM Update».

Итак, следующий шаг должен был опубликовать библиотеку. Верно? ?

Это была самая сложная часть, потому что в моей голове была куча вещей, как:

1. Как я могу сделать дерево дробиться?
2. Какие системы модуля JS должны быть нацелены (Commonjs, AMD, Harmony).
3. Должен ли я трансать источника?
4. Должен ли я связывать источник?
5. Какие файлы я должен опубликовать?

У каждого из нас были такие вопросы, пузыряющиеся в наших головах при создании библиотеки. Верно?

Я постараюсь решить все вышеперечисленные вопросы сейчас.

Различные типы модульных систем JS?

1. Commonjs.

• Реализовано узел
• Используется для Серверная сторона Когда у вас есть модули установлены
• Без временного времени/асинхронизации загрузки модуля
• Импорт через ” Требуется “
• Экспорт через ” module.exports “
• Когда вы импортируете, вы верните объект
• Нет Встряхивание дерева, потому что когда вы импортируете, вы получаете объект
• Нет статического анализа, поскольку вы получаете объект, поэтому поиск свойств находится во время выполнения
• Вы всегда получаете копию объекта, поэтому Никаких живых изменений в сам модуль
• Плохое управление циклической зависимостью
• Простой синтаксис

2. AMD: Определение асинхронного модуля

• Реализовано Потребление
• Используется для Клиентская сторона (браузер) Когда вы хотите динамическую загрузку модулей
• Импорт через «Требовать»
• Сложный синтаксис

3. УМД: универсальный модуль определение

• Комбинация Commonjs + AMD (То есть синтаксис Commonjs + Async Loade amd)
• Может использоваться для обоих AMD/Commonjs среда
• UMD по существу создает способ использовать любой из двух, а также поддерживая глобальное определение переменной. В результате модули UMD способны работать на обоих Клиент и сервер Отказ

4. Гармония Ecmascript (ES6)

• Используется для обоих Сервер/Клиент боковая сторона
• Время выполнения/статическая загрузка модулей поддерживается
• Когда ты Импорт, Вы вернетесь Привязки значения (реальная стоимость)
• Импорт через «Импорт» и экспорт через «Экспорт»
• Статический анализ – Вы можете определить импорт и экспорт во время компиляции (статически) – вам нужно только посмотреть на исходный код, вам не нужно его выполнять
• Древо дробильно, Из-за Статический анализ поддерживается ES6
• Всегда получаю фактическая ценность Так что живые изменения в сам модуль
• Лучшая циклическая зависимость управления, чем общие

Так что теперь вы знаете все о различных типах модульных систем JS и как они развивались.

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

Давайте погрузимся в более глубокий и разработайте пример библиотеки, чтобы ответить на все вопросы, связанные с публикацией библиотеки в правильном уровне.

Я построил небольшую библиотеку пользовательской интерфейсы (вы можете найти исходный код на Github ), и я поделюсь всем своим опытом и исследованиями для транспилинга, объединения и публикации.

Здесь у нас есть небольшая библиотека пользовательского интерфейса, которая имеет 3 компонента: кнопка, карта и навкар. Давайте транспортировать и опубликовать его шаг за шагом.

Лучшие практики перед публикацией?

1. Встряхивание дерева?

• Встряхивание дерева Это термин, обычно используемый в контексте JavaScript для устранения мертвого кода. Это зависит от Статическая структура синтаксиса модуля ES2015, то есть Импортировать и экспорт . Имя и концепция были популярны модулем ES2015 Bundler свернуть .
• WebPack и Rollup Оба поддержки Встряхивание дерева, Это означает, что мы должны иметь в виду определенные вещи, чтобы наш код был дрожащим деревом.

2. Опубликовать все варианты модуля

• Мы должны опубликовать все варианты модуля, например Умд и Es Поскольку мы никогда не знаем, какие версии браузера/WebPack нашим потребителям могут использовать эту библиотеку/пакет в.
• Хотя все бабки, как WebPack а также Свернуть Понять модули ES, если наш потребитель использует WebPack 1.x, Тогда он не может понять модуль ES.

// package.json

{"name": "js-module-system","version": "0.0.1",...

"main": "dist/index.js","module": "dist/index.es.js",

...}

• Главная поле Package.json Файл обычно используется для указывает на Умд Версия библиотеки/пакета.
• Вам может быть интересно – как я могу выпустить Es Версия моей библиотеки/пакета? ? М Оделье Поле р Ackage.json используется, чтобы указать на E S Версия библиотеки/пакета. Раньше многие поля использовались как J S: следующий и Дж S: Главная , но м Оделье сейчас стандартизирован и используется Bundlers в качестве поиска e S V. Эрозия библиотеки/пакета.

Так что теперь, что дальше? Транспиляция или пакет? Какие инструменты мы должны использовать?

Ах, вот идет самая сложная часть! Давайте погрузиться в. ?

WebPack VS Rollup VS Babel?

Это все инструменты, которые мы используем в нашей повседневной жизни, чтобы отправить наши приложения/библиотеки/пакеты. Я не могу представить современное веб-разработка без них – # благословенный Отказ Поэтому мы не можем их сравнить, так что это будет не тот вопрос, чтобы спросить! ❌.

Каждый инструмент имеет свои преимущества и служит разным целям на основе ваших потребностей.

Давайте посмотрим на каждый из этих инструментов сейчас:

WebPack

WebPack отличный модуль Bundler? Это широко принято и в основном используется для строительства спа. Это дает вам все функции из коробки, как C Од-расщепление, А Синхронизация загрузки пучков, т Ree Shaking, и так далее. Используется C ommonjs модульная система.

PS: WebPack-4.0.0 Альфа уже выходит? Надеюсь, что со стабильным выпуском он станет универсальным Bundler для всех типов модульных систем.

Рулон

Роллап также модуль Bundler похож на WebPack. Однако основным преимуществом свертывания является то, что следует новое стандартизированное форматирование для модулей кода, включенных в ES6 Редакция, так что вы можете использовать его, чтобы объединить ES модуль Вариант вашей библиотеки/пакета. Это не поддерживает async loading пучков.

Варить

Бабел это транспортер Для JavaScript наиболее известен своей способностью превратить код ES6 в код, который работает в вашем браузере (или на вашем сервере) сегодня. Помните, что это просто транкии И не связывает свой код.

Мой совет: Используйте скат для библиотек и WebPack для приложений.

Транпиль (Babel-Ify) источник или пучок Это

Опять же есть история за этим. ?

Я провел большую часть своего времени, пытаясь выяснить ответ на этот вопрос, когда я строил эту библиотеку. Я начал копать мои Node_Modules, чтобы посмотреть все отличные библиотеки и проверить их системы сборки.

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

Как вы можете видеть в приведенном выше изображении, я разделил эти библиотеки/пакеты на две группы на основе их характеристик:

1. Библиотеки пользовательских интерфейсов ( Стильные компоненты , Материал-ui )
2. Основные пакеты ( React , React-Dom )

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

Библиотеки пользовательских интерфейсов иметь Dist Папка, которая имеет комплектную и полезную версию для Es и UMD/CJS Модульные системы как цель. Есть lib папка, которая имеет транспортирован Версия библиотеки.

Основные пакеты есть только одна папка, которая имеет в комплекте и министерстве для CJS. или Умд модульная система как цель.

Но почему существует разница в сборке библиотек UI и основных пакетов? ?

Библиотеки пользовательских интерфейсов

Представьте, что если мы просто опубликуем комплектную версию нашей библиотеки и разместите ее на CDN. Наш потребитель будет использовать его прямо в T/> тег. Теперь, если мой потребитель хочет использовать Jus т < ; Кнопка/> Компонент, они должны загрузить всю библиотеку. Кроме того, в браузере нет Bundler, который позаботится о встряхивании дерева, и мы в конечном итоге доставку всего библиотечного кода нашего потребителя. Мы не хотим этого.

Теперь, если мы просто транпилируем SRC в lib и принимает lib На CDN наши потребители могут на самом деле могут получить все, что они хотят без каких-либо накладных. «Корабль меньше, нагрузка быстрее». ✅

Основные пакеты

Основные пакеты никогда не используются через T/> тег, так как они должны быть частью основного приложения. Таким образом, мы можем безопасно освободить в комплекте Ver Sion (U MD, ES) для таких рода пакетов и оставьте систему сборки до потребителей.

Например, они могут использовать Умд вариант но нет встряхивания дерева, или они могут использовать Es Вариант Если Bundler способен идентифицировать и получать преимущества встряхивания дерева.

// CJS requireconst Button = require("uilibrary/button");

// ES importimport {Button} from "uilibrary";

Но … как насчет нашего вопроса: Должны ли мы транпиль (дабелифицировать) источник или раскладывать его? ?

Для библиотеки пользовательской интерфейсы нам нужно транпили Источник с Бабел с es Модульная система как цель, и поместите ее в ликвидность . Мы даже можем провести lib на CDN.

Мы должны пучок и миниин Источник, использующий Роллап для CJS/UMD Модульная система и es модульная система как цель. Изменить Package.json указывать на соответствующие целевые системы.

// package.json

{"name": "js-module-system","version": "0.0.1",...

"main": "dist/index.js",      // for umd/cjs builds"module": "dist/index.es.js", // for es build

...}

Для Основные пакеты нам не нужно lib версия.

Нам просто надо пучок и миниин Источник, использующий Роллап для CJS/UMD Модульная система и es модульная система как цель. Изменить Package.json указывать на правильные целевые системы, как указано выше.

Совет : Мы можем принять Dist Папка на CDN, а также для потребителей, которые готовы скачать всю библиотеку/пакет через T/> тег.

Как мы должны построить это?

У нас должны быть разные сценарии для каждой целевой системы в Package.json. . Вы можете найти Rollup Config . в репо Github.

// package.json

{..."scripts": {"clean": "rimraf dist","build": "run-s clean && run-p build:es build:cjs build:lib:es","build:es": "NODE_ENV=es rollup -c","build:cjs": "NODE_ENV=cjs rollup -c","build:lib:es": "BABEL_ENV=es babel src -d lib"}...}

Что мы должны опубликовать?

• Лицензия
• ПРОЧТИ МЕНЯ
• ChangeLog
• Метаданные ( Главная , Модуль , Bin ) – Package.json.
• Контроль через Package.json Файлы имущество

В Package.json , «Файлы» Поле – это массив шаблонов файлов, которые описывают записи, которые будут включены, когда ваш пакет установлен в качестве зависимости. Если вы назваете папку в массиве, то она также будет включать файлы внутри этой папки.

Мы будем включать lib и Dist папки в «Файлы» поле в нашем случае.

// package.json

{..."files": ["dist", "lib"]...}

Наконец, библиотека готова опубликовать. Просто введите NPM запустить сборку Команда в терминале, и вы можете увидеть следующий вывод. Внимательно посмотреть на район и lib папки. ?

Заворачивать

Ух ты! Куда уходит время? Это была дикая поездка, но я искренне надеюсь, что он дал вам лучшее понимание системы JavaScript Module и как вы можете создать свою собственную библиотеку и публиковать ее.

Просто убедитесь, что вы заботитесь о следующих вещах:

1. Сделать это Дерево дробит Отказ ?
2. Цель как минимум Эс Гармония и CJS Модульные системы. ?
3. Использовать Бабел и Будучики для библиотек. ?
4. Использовать Будучики для основных пакетов. ?
5. Установите модуль поле Package.json указать на Es Версия вашего модуля (PS: это помогает в тряске дерева). ?
6. Опубликовать папки, которые имеют транспортирован а также в комплекте Версии вашего модуля. ?

Тенденции на этой неделе?

1. WebPack-V4 Альфа выпустила. ?
2. Parceljs : Bundler Bundler Bundler Bundler Bundler Bundler. ?
3. Турбо : 5x быстрее, чем пряжа и NPM, и работает в браузере в браузере?

Благодаря Juho Vepsäläinen а также Лакши Рэнганат Для их отзывов и отзывов, Шон Т. Ларкин а также Тобиас Копперс Для совместного использования представления WebPack на Reactiveconf. , Addy Osmani. Для совместного использования разных систем модулей JS в «Написание модульного JavaScript с AMD, Commonjs и Es Garmony» .

Снимание Если вам это нравится, убедитесь, что порекомендуйте (от Clap?) , f Подпишись на меня в Твиттере, И поделитесь этим с друзьями!?

Оригинал: “https://www.freecodecamp.org/news/anatomy-of-js-module-systems-and-building-libraries-fadcd8dbd0e/”