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

от автора

image

  • 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/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *