- 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.
Еще по теме
Автор: dark_ruby