JS Lab2017_Сергей Селецкий_System.js и jspm

JSPM ИЛИ КАК ОБОЙТИСЬ БЕЗ WEBPACK’А

СЕРГЕЙ СЕЛЕЦКИЙ

@SSELETSKYY

ПРОВЕРКА МИКРОФОНА

О ЧЕМ МЫ ПОГОВОРИМ

• Кто я. Где я. И почему.

• Что такое SystemJS и jspm

• Как сконфигурировать проект

• Пишем только на ES6

• Модульная сборка против bundle-sfx

Кто яFrontend (React) developer - сейчас Full stack (Ruby,JS) TL - с 2012г

Java, PHP, C++, Delphi - до 2012г

Кто яRuby TL React/Redux dev

Кто яRuby TL React/Redux dev

Lohika Internal Training Program


Главная задача - сделать блог

Какие использовать библиотеки? it’s up to you!


Главная задача - сделать блог Backend API - NodeJS Frontend Vanilla JS (ver 1) Frontend React/Redux (ver 2)

Libs: express, jade/pug, sequelize, SQL



Libs: handlebars, lodash, text



Libs: redux-thunk, lodash

SystemJS

SystemJSАСИНХРОННЫЙ ЗАГРУЗЧИК

JS МОДУЛЕЙ ЛЮБЫХ ИЗВЕСТНЫХ ФОРМАТОВ

SystemJSОНО СКАЧИВАЕТ ЛЮБЫЕ ES6 ФАЙЛИКИ

И ПОДГОТАВЛИВАЕТ ИХ ДЛЯ РАБОТЫ В НЕСМЫШЛЕНОМ БРАУЗЕРЕ

SystemJSESM CJS AMD GLOBAL SYSTEM


ECMAScript Module


ECMAScript Module CommonJS


ECMAScript Module CommonJS Async Module Definition


ECMAScript Module CommonJS Async Module Definition свят-свят


ECMAScript Module CommonJS Async Module Definition свят-свят System.register(Dynamic)


ECMAScript Module CommonJS Async Module Definition свят-свят System.register(Dynamic)

Web Assembly !

Экспериментальная поддержка в версии 0.20

SystemJS

SystemJSДЕПИЛЯЦИЯ ТРАНСПИЛЯЦИЯ

ПРЯМО В БРАУЗЕРЕ

Traceur Babel TypeScript

Browser Development

В таком виде подгружает модули всех форматов

Browser Production

В таком виде подгружает только модули предварительно подготовленные в формат System.register

Browser Production

В таком виде подгружает только модули предварительно подготовленные в формат System.register

И тут без Webpack’a не обойтись! Шутка

JSPMJAVASCRIPT PACKAGE MANAGER

JSPMМенеджер пакетов для SystemJS

Загружает пакеты из npm и Github

Есть CLI для установки пакета по принципу `npm i`

Глобальный реестр http://jspm.io

package.json используется для регистрации пакетов

http://jspm.io

JSPMbaseURL — путь к папке public относительно package.json.

jspm_packages — папка куда jspm будет устанавливать все внешние зависимости. config.js — основной файл настроек в папке baseURL. Client baseURL — URL папки public для браузера Transpiler — используемый транспайлер. (по умолчанию babel).

JSPM$ npm i jspm [-g]

$ ./node_modules/.bin/jspm init

$ jspm i react

$ jspm inspect | grep react > npm:react 15.4.2

Code Examples

СПАСИБО

JS Lab2017_Сергей Селецкий_System.js и jspm

Technology