Статьи

Введение в диспетчер пакетов Jspm и загрузчик модулей SystemJs

Октябрь 16, 2017

В этой статье мы рассмотрим текущее состояние модульности ES6, узнав, как использовать менеджер пакетов Jspm и связанный с ним загрузчик модулей SystemJs (пример кода доступен  здесь ). Мы рассмотрим следующие темы:

  • Использование модулей ES6 сегодня
  • Почему модульность важна в Javascript
  • Менеджер пакетов Jspm и как его использовать сегодня
  • создание готового к использованию пакета с Jspm
  • Модуль-загрузчик SystemJs
  • Джспм против Бауэра
  • JSPM против Npm
  • Выводы

Использование модулей ES6 сегодня

Одна из основных целей модульности ES6 — сделать ее очень простой в установке и использовании любой библиотеки Javascript из любой точки Интернета (github, npm и т. Д.). Нужны только две вещи:

  • одна команда для установки библиотеки
  • одна строка кода для импорта библиотеки и ее использования

Представьте себе мир, в котором вы можете установить библиотеку с помощью команды, подобной этой:

jspm install jquery

А затем импортируйте библиотеку с одной строкой кода и просто начните использовать ее:

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");

Оказывается, что это на самом деле можно  сегодня  с JSPM и его связанные SystemJs модуль погрузчика, без каких — либо дополнительных инструментов , необходимых.

Обратите внимание, что приведенный выше импорт также может быть выполнен в синтаксисе ES6 при использовании транспилятора, такого как Babel:

import $ from 'jquery';

Мы увидим, как все это работает, и как его действительно легко использовать.

Почему модульность важна в Javascript?

Модульность важна в Javascript по тем же причинам, что и в любом другом языке:

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

Фундаментальные проблемы, которые решает Jspm

Когда проекты достигнут определенного размера, им рано или поздно придется столкнуться с проблемой «ада зависимости». Это происходит, когда две разные версии одной и той же библиотеки необходимы одновременно.

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

Все эти проблемы прозрачно решаются с помощью Jspm: он допускает несколько версий одного и того же пакета и даже поддерживает циклические зависимости.

Диспетчер пакетов Jspm в действии

Как мы уже упоминали, для установки библиотеки нам нужна только одна команда. Библиотеки могут быть установлены из нескольких источников, например, из github или npm. Давайте установим пару библиотек:

jspm install npm:timezone-js
jspm install github:pablojim/highcharts-ng

Команда установки загружает все дерево зависимостей и копирует его в файловую систему в виде версионного плоского дерева, которое выглядит следующим образом:

babel-core@5.8.25
babel-runtime@5.8.25
core-js@1.1.4

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

jspm bundle-sfx --minify src/main bundle.min.js

Эта команда создает самовыполняющийся и минимизированный пакет, где точкой входа выполнения является файл  src/main.js. Jspm будет следить за импортом этого файла и рекурсивно связывать все необходимые файлы Javascript.

В результате получается готовый к использованию пакет, который можно использовать на веб-странице просто так:

<script src="bundle.min.js"></script>

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

Что насчет SystemJ?

Вы заметили, что до сих пор нигде не видно загрузчика модулей SystemJs? Это связано с тем, что Jspm знает о SystemJs и будет прозрачно устанавливать его, включать его в самовыполняющийся пакет и использовать его для загрузки точки входа в приложение.

Это очень мощно: сегодня мы можем использовать модули ES6 в производстве прозрачным способом. Все это работает, даже в проекте только для ES5 (с использованием синтаксиса require).

Что такое загрузчик модулей SystemJs?

SystemJs — это универсальный загрузчик модулей, способный загружать модули разных форматов: AMD, CommonJs, globals. Работает как в узле, так и в браузере.

SystemJs состоит из polyfill загрузчика модулей ES6 и уровня совместимости, который позволяет ему использовать различные форматы модулей. SystemJ могут использоваться независимо от Jspm, но два инструмента действительно лучше всего использовать вместе.

Использование SystemJ независимо от Jspm не дает таких преимуществ по сравнению с другими решениями, такими как  Bower + Browserify  или  Bower + Webpack . Вам все равно придется загружать зависимости с помощью другого менеджера пакетов и настраивать инструмент сборки для создания пакета. Также вам нужно будет установить загрузчик модулей и научиться его настраивать и использовать.

С Jspm мы можем более или менее забыть о том, что используется загрузчик модулей, и просто использовать синтаксис импорта ES6 (или эквивалент ES5).

JSPM против Бауэра

Jspm и Bower были построены с совершенно разными философиями. Бауэр основан на предположении, что в браузере может быть одновременно только одна версия библиотеки.

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

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

Jspm против Npm

Сказав все это, тенденция состоит в том, что npm становится все более и более менеджером пакетов для всего Javascript в целом, в том числе для внешнего интерфейса.

Все больше и больше интерфейсных библиотек публикуются в npm с осмысленным   экспортом CommonJ , но эти библиотеки нельзя использовать в узле, поскольку они часто требуют DOM. Цель состоит в том, чтобы модуль CommonJs был легко устанавливаемым, чтобы библиотеки веб-интерфейса могли, например, использоваться  browserify или даже SystemJ и использоваться в браузере вместо узла. Одна из библиотек веб-интерфейса, которая публикуется в npm, — это, например,  AngularJs .

Команда npm планирует сделать npm более дружелюбным. Команда Angular сделала или сделает npm конкретное  предложение  о том, как этого можно достичь.

Npm только что выпустил версию 3 пару недель назад, и только в этой последней версии они реализовали максимально плоское дерево зависимостей. Это, безусловно, хороший первый шаг, чтобы помочь охватить модульность внешнего интерфейса, но у Jspm огромный старт в этом направлении, и за ним стоит большой импульс.

Выводы

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

Концептуально и функционально Jspm и SystemJ намного опережают другие подобные инструменты. Мало того, что Jspm / SystemJ имеют больше возможностей, но на самом деле их гораздо проще использовать, особенно в сценарии с самореализующимся пакетом, представленном выше.

Следующий пост содержит подробное сравнение Bower, Jspm и npm.  Bower мертв? Что такое JSPM? Npm для клиентской части?

В этом выступлении создателя Jspm, SystemJs и загрузчика модулей ES6 polyfill Ги Бедфорд подробно расскажет о Jspm и SystemJs —  управлении пакетами для модулей ES6.

Кроме того, код в этом посте можно найти  здесь , с инструкциями по запуску Jspm в действии в первый раз.

29
Share: