Хотел бы поделиться решением вопроса, как подключить uikit 3.0.0-21.beta к проекту на typescript и webpack. В данном деле может возникнуть 3 небольших сложности: первая, как правильно импортировать uikit, второе, где взять типы для uikit и третье, почему все равно не работает.
Для тех кто еще не слышал о uikit скажу, что это модульный фреймворк для разработки быстрых и мощных веб-интерфейсов.
Чтобы узнать как подключить uikit используя webpack можно обратиться к официальной документации https://getuikit.com/docs/webpack, там описан следующий способ:
import UIkit from 'uikit';
Но в данном случае компилятор TypeScript будет ругаться и подключить нормально uikit не даст, чтоб все таки подключить фреймворк нужно использовать следующий код:
import * as UIkit from 'uikit'; import * as Icons from 'uikit/dist/js/uikit-icons'; UIkit.use(Icons); UIkit.notification('Hello world.');
Теперь все работает но компилятор TypeScript продолжает ругаться. Это происходит потому, что он не находит типы для uikit. Поэтому скачаем их:
npm install --save @types/uikit
Вроде все что нужно для работы у нас есть, но компилятор TypeScript продолжает упорно ругаться. На этот раз все происходит не по нашей вине, просто текущая версия типов не описывает модули которые нам нужны.
Для того, чтобы все окончательно заработало нужно описать недостающие типы. Я это уже сделал, и отправил pull request на DefinitelyTyped.
Для того, чтобы все окончательно заработало нужно описать недостающие типы. Я это уже сделал, и отправил pull request на DefinitelyTyped.
Это первый мой pull request подобного рода, надеюсь пройдет :)
Итоговый код:
Описание недостающих типов для репозитория https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/uikit на состояние 24.04.2017
type fn = (arg: any) => any; interface Icons { album: HTMLObjectElement; ban: HTMLObjectElement; behance: HTMLObjectElement; bell: HTMLObjectElement; bold: HTMLObjectElement; bolt: HTMLObjectElement; bookmark: HTMLObjectElement; calendar: HTMLObjectElement; camera: HTMLObjectElement; cart: HTMLObjectElement; check: HTMLObjectElement; clock: HTMLObjectElement; close: HTMLObjectElement; code: HTMLObjectElement; cog: HTMLObjectElement; comment: HTMLObjectElement; commenting: HTMLObjectElement; comments: HTMLObjectElement; copy: HTMLObjectElement; database: HTMLObjectElement; desktop: HTMLObjectElement; download: HTMLObjectElement; dribbble: HTMLObjectElement; expand: HTMLObjectElement; facebook: HTMLObjectElement; file: HTMLObjectElement; flickr: HTMLObjectElement; folder: HTMLObjectElement; forward: HTMLObjectElement; foursquare: HTMLObjectElement; future: HTMLObjectElement; github: HTMLObjectElement; gitter: HTMLObjectElement; google: HTMLObjectElement; grid: HTMLObjectElement; happy: HTMLObjectElement; hashtag: HTMLObjectElement; heart: HTMLObjectElement; history: HTMLObjectElement; home: HTMLObjectElement; image: HTMLObjectElement; info: HTMLObjectElement; instagram: HTMLObjectElement; italic: HTMLObjectElement; joomla: HTMLObjectElement; laptop: HTMLObjectElement; lifesaver: HTMLObjectElement; link: HTMLObjectElement; linkedin: HTMLObjectElement; list: HTMLObjectElement; location: HTMLObjectElement; lock: HTMLObjectElement; mail: HTMLObjectElement; menu: HTMLObjectElement; minus: HTMLObjectElement; more: HTMLObjectElement; move: HTMLObjectElement; nut: HTMLObjectElement; pagekit: HTMLObjectElement; pencil: HTMLObjectElement; phone: HTMLObjectElement; pinterest: HTMLObjectElement; play: HTMLObjectElement; plus: HTMLObjectElement; pull: HTMLObjectElement; push: HTMLObjectElement; question: HTMLObjectElement; receiver: HTMLObjectElement; refresh: HTMLObjectElement; reply: HTMLObjectElement; rss: HTMLObjectElement; search: HTMLObjectElement; server: HTMLObjectElement; settings: HTMLObjectElement; shrink: HTMLObjectElement; social: HTMLObjectElement; soundcloud: HTMLObjectElement; star: HTMLObjectElement; strikethrough: HTMLObjectElement; table: HTMLObjectElement; tablet: HTMLObjectElement; tag: HTMLObjectElement; thumbnails: HTMLObjectElement; trash: HTMLObjectElement; tripadvisor: HTMLObjectElement; tumblr: HTMLObjectElement; tv: HTMLObjectElement; twitter: HTMLObjectElement; uikit: HTMLObjectElement; unlock: HTMLObjectElement; upload: HTMLObjectElement; user: HTMLObjectElement; users: HTMLObjectElement; vimeo: HTMLObjectElement; warning: HTMLObjectElement; whatsapp: HTMLObjectElement; wordpress: HTMLObjectElement; world: HTMLObjectElement; xing: HTMLObjectElement; yelp: HTMLObjectElement; youtube: HTMLObjectElement; "arrow-down": HTMLObjectElement; "arrow-left": HTMLObjectElement; "arrow-right": HTMLObjectElement; "arrow-up": HTMLObjectElement; "chevron-down": HTMLObjectElement; "chevron-left": HTMLObjectElement; "chevron-right": HTMLObjectElement; "chevron-up": HTMLObjectElement; "cloud-download": HTMLObjectElement; "cloud-upload": HTMLObjectElement; "credit-card": HTMLObjectElement; "file-edit": HTMLObjectElement; "git-branch": HTMLObjectElement; "git-fork": HTMLObjectElement; "github-alt": HTMLObjectElement; "google-plus": HTMLObjectElement; "minus-circle": HTMLObjectElement; "more-vertical": HTMLObjectElement; "paint-bucket": HTMLObjectElement; "phone-landscape": HTMLObjectElement; "play-circle": HTMLObjectElement; "plus-circle": HTMLObjectElement; "quote-right": HTMLObjectElement; "sign-in": HTMLObjectElement; "sign-out": HTMLObjectElement; "tablet-landscape": HTMLObjectElement; "triangle-down": HTMLObjectElement; "triangle-left": HTMLObjectElement; "triangle-right": HTMLObjectElement; "triangle-up": HTMLObjectElement; "video-camera": HTMLObjectElement; } declare namespace UIkit { const use: fn; const notification: fn; } declare let Icons: Icons; declare module "uikit" { export = UIkit; } declare module "uikit/dist/js/uikit" { export = UIkit; } declare module "uikit/dist/js/uikit-icons" { export = Icons; }