skip to Main Content
TypeScript Dzielenie Kodu Na Wiele Plików, Moduły I WebPack – Krok Po Kroku

TypeScript dzielenie kodu na wiele plików, moduły i WebPack – Krok po kroku

Post Series: Krok po kroku

Ostatnio skończyliśmy na HelloWorld, teraz skupimy się jak można podzielić nasz kod na wiele plików.

Kod TypeScript tak jak JavaScript dzieli się na moduły.

Aby umożliwić korzystanie z modułów w TypeScript należy z edytować tsconfig.json i dodać

Określając module określamy jaki wzorzec, akceptowany przez popularne ładowarki-pakietów. Zmiana ustawienia module zmienia kod, który jest generowany przez słowa kluczowe export i import

commonjs to wzorzec wykorzystywany standardowo wykorzystywany przez Node.js. Wykorzystanie CommonJS sprowadza się do napisania w JavaScript:

require to funkcja definiowana przez Node.js, która pozwala na załadowanie plików. W powyższym przykładzie ładujemy wyeksportowane funkcje z biblioteki calc. Aby zrobić coś podobnego w TypeScript trzeba napisać:

Kompilator (a raczej transpiler – to kompilator tłumaczący kod źródłowy na inny kod źródłowy) TypeScript zmieni linijkę z import na linijkę z require.

Utwórz nowy plik o nazwie calc.ts` i wprowadź taki kod.

export oznacza, że następująca po nim przedmiot będzie dostępna poprzez import w innym pliku. Taką przedmiotem może być zmienna, funkcja, klasa itp.

default oznacza, że następująca po nim przedmiot będzie dostępny w sposób domyślny. import pozwala na definiowanie jakie przedmioty chcemy wyciągnąć z pliku jeżeli default nie jest definiowany. Zazwyczaj default jest zdefiniowany na najważniejszym przedmiocie w pliku.

Sam kod przedstawia klasę z dwoma funkcjami statycznymi (czyli nie musimy tworzyć obiektu danej klasy).

Przejdź z powrotem to do głównego pliku app.ts.

na górze wpisz

Zapis ./calc oznacza że plik calc znajduje się w obecnym katalogu, gdybyśmy pomnieli ./ to TypeScript szukałby tego pliku w katalogu node_modules.

gdy zaczniemy pisać kod calc.add powiniśmy zauważyć że Visual Studio Code podpowiada nam kod.

simpleCalcAdd

Możesz uzbroić podpowiadacza o dodatkowe informacje korzystając z JSDoc, aby to zrobić na funkcję add dodaj

Dzięki czemu Visual Studio Code będzie podpowiadał tak:

addWithJsDoc

Wiele plików a przeglądarka

Przeglądaki nie potrafią ładować plików przy użyciu require. Dlatego programiści JavaScript (i TypeScript) wyręczają przeglądarki tworząc jeden plik .js który posiada wklejony kod z wszystkich plików, które są wymagane.

Zazwyczaj robi się to przy użyciu automatów takich jak browserify lub webpack.

Opiszę wykorzystanie webpack jako staje się coraz bardziej popularny i jest prawdziwym kombajnem. Potrafi znacznie więcej niż tylko łączenie plików JavaScript/TypeScript w jeden.

Instalacja webpack wygląda tak: npm install -g webpack

No i potrzebujemy nauczyć webpack jak obsługiwać TypeScript: npm install ts-loader --save to polecenie wykonujemy w katalogu, w którym mamy nasz kod TypeScript.

webpack konfiguruje się tworząc plik webpack.config.js, na nasze potrzeby będziemy potrzebować coś takiego:

Definiujemy jaki plik jest plikiem początkowym ./app.ts definiujemy też jak ma nazywać się plik wyjściowy bundle.js.

Jeżeli teraz w konsoli uruchomimy polecenie webpack to powinniśmy dostać błąd, że TypeScript nie został znaleziony. Przestajemy korzystać z kompilatora dołączonego do Visual Studio Code, będziemy korzystać z wersji dostępnej z npm.

Aby przejść na wersję z npm trzeba zainstalować TypeScript: npm install typescript --save. Visual Studio Code może się oburzyć, że wersję jego TypeScripta (VS Code jest napisany w TypeScript) i dostępnego w środowisku są różne. Aby uciszyć krzyk edytora trzeba zmodyfikować plik .vscode/settings.json i dodać:

I ostatnia rzecz do zrobienia w Visual Studio Code to skonfigurowanie go aby skrót Ctrl+Shift+B uruchamiał webpack

Aby tak ustawić Visual Studio Code trzeba zmienić zawartość pliku .vscode/tasks.json na:

Ostateczny test

Aby przetestować działanie kompilacji + łączenie plików w pliku app.ts kod zamień na:

Skompiluj przy wciskając Ctrl+Shift+B w Visual Studio Code.

W pliku index.html odnieść się do pliku bundle.js czyli:

Jeżeli otworzysz plik index.html w przeglądarce i przejdziesz do konsoli deweloperskiej (F12) to powinieneś zobaczyć wynik dodawania 50.

Kod Źródłowy

Źródła

Paweł Sołtysiak

Programista, domowy kucharz i "amator amerykańskiej polityki".
Zbieram informacje z całej sieci, po odrzuceniu chwastów i dodaniu swojej opinii publikuje na blogu.

Back To Top