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

Lohika Internal Training Program

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

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

Lohika Internal Training Program

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

Libs: express, jade/pug, sequelize, SQL

Lohika Internal Training Program

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

Libs: handlebars, lodash, text

Lohika Internal Training Program

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

Libs: redux-thunk, lodash

SystemJS

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

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

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

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

SystemJSESM CJS AMD GLOBAL SYSTEM

SystemJSESM CJS AMD GLOBAL SYSTEM

ECMAScript Module

SystemJSESM CJS AMD GLOBAL SYSTEM

ECMAScript Module CommonJS

SystemJSESM CJS AMD GLOBAL SYSTEM

ECMAScript Module CommonJS Async Module Definition

SystemJSESM CJS AMD GLOBAL SYSTEM

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

SystemJSESM CJS AMD GLOBAL SYSTEM

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

SystemJSESM CJS AMD GLOBAL SYSTEM

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 используется для регистрации пакетов

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

СПАСИБО