- 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
Еще по теме
ссылка на оригинал статьи http://habrahabr.ru/post/256095/