Webpack externals – czyli nie tak łatwo dołączyć zewnętrzny skrypt js

Często w swojej pracy napotykamy problemy, przy których spędzamy mnóstwo czasu i ciężko zrobić krok naprzód. Ostatnie dwa wieczory spędziełem nad rozwiązywaniem takiego problemu. W dzisiejszym wpisie na przykładzie z SayHello pokażę możliwości dołączenia zewnętrznej biblioteki do swojego projektu. Poświęciłem na to dużo czasu i może poniższy tekst komuś go zaoszczędzi.

Zdravo! (bośniacki, cześć)
W projekcie SayHello postanowiłem wykorzystać bibliotekę webgazer.js. Niestety nie jest ona dostępna jako pakiet npm, co spowodowało, że bibliotekę  tę do projektu muszę dołączyć w inny sposób. Dla przypomnienia, projekt jest realizowany z wykorzystaniem React.js i TypeScript.

Postanowiłem, że skoro projekt jest uruchamiany za pomocą webpacka to wolałbym nie mieć żadnych bezpośrednich zależności do zewnętrznych bibliotek javascript. W standardowy sposób biblioteki dołączamy do pliku index.html za pomocą taga script

index.html

 <script type="text/javascript" src="webgazer.js"/> 

W webpacku Istnieje jednak opcja taka jak EXTERNALS, dzięki, której możemy podpinać dowolne biblioteki.

webpack.config.js

 externals: { jquery: 'jQuery' }

W wersji pierwszej webpack, umożliwiał dodanie biblioteki poprzez definiowanie zmiennej wskazującą na ścieżkę do dołączanego javascriptu

webpack.config.js

 var webgazer = require('path/to/webgazer.js'); 

 Jak się szybko okazało, używając webpacka w wersji drugiej, przy zastosowaniu opcji externals nie uniknę dodania biblioteki wprost w index.html.

Co więcej, takich przykładów rozwiązań znalazłem najwięcej, jednak z wersją webpacka używaną przeze mnie, to najzwyczajniej nie działa. Zacząłem szukać innego rozwiązania lub pomocy jak to poprawić.

Poszukując odpowiedzi na to w jaki sposób mogę podpiąć webgazera, zadałem pytanie w grupie na facebooku – js news: after hours. Jedna z odpowiedzi zasugerowała użycie SCRIPT-LOADERa. Po szybkim zerknięciu na dokumentację (ubogą jak jasna cholera!) stwierdziłem, że to może być to.

Jednak i tu rozwiązanie nie przyszło tak łatwo. O ile instalacja i podpięcie do webpacka są banalne,

 npm install save-dev script-loader 

webpack.config.js

 module.exports = { module: { rules: [ { test: /\.exec\.js$/, use: [ 'script-loader' ] } ] } } 

to wykorzystanie (przynajmniej w moim przypadku) już nie. Niby podpinamy to bardzo prosto w komponencie gdzie chcemy tego użyć

exampleReactComponent.js

 import webgazer from 'path/to/webgazer.js'; 

Jednak i w tym przypadku import kompletnie nie widzi pliku z podanej ścieżki albo nie potrafi go odczytać. Do wyjaśnienia tej zagadki niestety nie doszedłem. Po tym jak konfiguracja powyższych wg powyższych sposobów zawiodła, podpiąłem mojego webgazera, w sposób najprostszy czyli za pomocą tagów script. Mimo to, że samo podpięcie jest bardzo proste to napotkałem problem, jak odwołać się do zmiennej globalej (bo taką zwraca webgazer.js) w ramach TypeScripta w komponencie Reactowym. 

TypeScript jak sama nazwa wskazuje jest bardzo mocno typowany, co spowodowało, że musi on wiedzieć skąd i czym jest webgazer, tutaj wystarczy zadeklarować zmienną i powiedzieć mu, że gdzieś wyżej już coś takiego istnieje. Poniżej przykład podpięcia gotowej do użycia biblioteki:

index.html

 <script type="text/javascript" src="webgazer.js"/> 

exampleReactComponent.js

	declare var webgazer:any;
	webgazer.begin();
	

Jak widać żeby się dobrać do biblioteki kod wynikowy jest minimalny, jednak problemów, które napotkałem po drodze było conajmniej kilka. Jednym z nich, o którym jeszcze nie wspomniałem, jest to że webgazer zwraca window.webgazer obiekt, co powodowało wywalenie się webpacka przy uruchamianiu.

Wydawałoby się, że trywialna rzecz do zrobienia w 5 minut, jednak nie było tak kolorwo. Mam nadzieję, że informacje zawarte w tym poście się komuś kiedyś przydadzą i nie będzie musiał przechodzić przez to samo co ja.

 

0

Zostaw komentarz