[Перевод] 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, а также конфигурационный фаил, после чего импортируем основной модуль нашего приложения: Запускаем локальный сервер и смотрим на нашу страницу.Сборка для продакшена Запускаем следующую команду в консоли и обновляем страницу в браузере: jspm bundle lib/main --inject Все наше приложение было скомпановано в один bundle.js. Как вариант, можно использовать jspm bundle-sfx lib/main Это создаст единый файл всего приложения, который можно использовать в script таге без использования config.js и system.js.Еще по теме Видео скринкасты и выступления [embedded content][embedded content]
Статьи
