jspm — менеджер пакетов для браузера

• jspm — это менеджер пакетов для SystemJS, сделаный на основе ES6 module loader
• Позволяет загружать все форматы модулей (ES6, AMD, CommonJS и Globals) непосредственно из npm или Github с управлением зависимостями. Также позволяет использовать любые не стандартные источники модулей, реализованные через Registry API
• В разработке: Загружает модули ES6 как отдельные файлы, и компилирует их в прямо в браузере
• В продакшене: Собирает модули в один или несколько бандлов, с единой командой для запуска всего приложения

Начнем

Устанавливаем jspm cli

  npm install jspm -g

Создаем проект

  cd my-project
  npm install jspm

Рекомендуется также локально установить jspm, дабы зафиксировать его версию для данного проекта. Это позволит сохранить поведение вашего приложения в случае, если глобальный jspm обновится. Для подтверждения локальной версии выполните jspm -v.

Создадим кофигурацию для нового проекта:

  jspm init

  Package.json file does not exist, create it? [yes]: 
  Would you like jspm to prefix the jspm package.json properties under jspm? [yes]: 
  Enter server baseURL (public folder path) [.]: 
  Enter jspm packages folder [./jspm_packages]: 
  Enter config file path [./config.js]: 
  Configuration file config.js doesn't exist, create it? [yes]:
  Enter client baseURL (public folder URL) [/]: 
  Which ES6 transpiler would you like to use, Traceur or Babel? [traceur]:

Это создаст фаил package.json и конфигурационный файл. Также jspm init запускается автоматически, если вы, устанавливаете jspm в пустой проект.

• baseURL — путь к корневой папке вашего http сервера (public) относительно файла package.json. По умолчанию это та же папка где и сам package.json.
• jspm packages folder — папка куда jspm будет устанавливать все внешние зависимости.
• Config file path — конфигурационный фаил для вашего приложения. Должен находится в baseURL и включен в систему контроля версий.
• Client baseURL — URL папки public для браузера
• Transpiler — используемый транспайлер. Эта опцию можно менять в любой момент командой jspm dl-loader --babel (по умолчанию traceur). Для более тонкой настроики можно определить babelOptions и traceurOptions

Если вам когда-нибудь понадобится поменять какие либо из этих настроек — можно напрямую редактировать package.json и ваше приложение подхватит новые настройки, когда вы запустите jspm install или jspm init.

Устанавливаем любые пакеты из репозитория jspm, Github или npm

  jspm install npm:lodash-node
  jspm install github:components/jquery
  jspm install jquery
  jspm install myname=npm:underscore

Установку нескольких пакетов можно обьединить в одну строку разделив пробелами.

Любой пакет npm или Github можно установить подобным образом.

Большинство npm пакетов установятся без каких-либо дополнительных настроек. Это происходит потому что репозиторий npm применяет трансформацию, основываясь на системе разрешения зависимостей Node require (от переводчика — имеется ввиду это) — это делает Node и пакеты в стиле npm совместимыми с jspm.

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

Имена всех установленных пакетов сохраняются в package.json — таким образом, папка jspm_packages, а также конфигурационный файл могут быть полностью восстановлены одной коммандой jspm install. Это идеальное решение для тех, кто использует системы контроля версий и не хочет помещать сторонние пакеты в свой репозиторий.

В фаил config.js помещается информация о версиях зависимостей и номера версий фиксируются. Таким образом, файл config.js становится фиксатором версий и он должен быть добавлен в систему контроля версий (от переводчика — некий аналог rails Gemfile.lock).

Пишем код приложения

Теперь можно начать создавать отдельные модули (включая модули формата ES6), например в папку lib:

lib/bootstrap.js

  import _ from 'lodash-node/modern/lang/isEqual';
  import $ from 'jquery';
  import underscore from 'myname';

  export function bootstrap() {
     // bootstrap code here
  }

lib/main.js

  import {bootstrap} from './bootstrap';
  bootstrap();

Запускаем наше приложение

HTML страницы должен включать скачанный автоматически при jspm init — загрузчик SystemJS, а также конфигурационный фаил, после чего импортируем основной модуль нашего приложения:

  <!doctype html>
  <script src="jspm_packages/system.js"></script>
  <script src="config.js"></script>
  <script>
    System.import('lib/main');
  </script>

Запускаем локальный сервер и смотрим на нашу страницу.

Сборка для продакшена

Запускаем следующую команду в консоли и обновляем страницу в браузере:

  jspm bundle lib/main --inject

Все наше приложение было скомпановано в один bundle.js. Как вариант, можно использовать

jspm bundle-sfx lib/main

Это создаст единый файл всего приложения, который можно использовать в script таге без использования config.js и system.js.

Еще по теме