CAG Angular 2 Kompetensutvecklingsdag
Setup
Utvecklingsmiljön är baserad på NodeJS v6.0.0 så man måste installera NodeJS först och främst.
Utvecklingsmiljön använder följande utvecklingsverktyg:
- lite-server (https://github.com/johnpapa/lite-server)
- typescript (https://github.com/Microsoft/TypeScript)
- typings (https://github.com/typings/typings)
- cpx (https://www.npmjs.com/package/cpx)
Katalogstruktur
angular2-day
|
+- src
|
+- dist
|
+- (node_modules)
All källkod (.html, .ts, .css) and resurser (.png, .jpg) ligger
under ./src/
.
När man kör npm install
så skapas ./node_modules`-katalogen där
alla 3PP-bibliotek läggs av NPM.
När man kör npm run build
händer följande:
./node_modules kopieras till
./dist`- alla filer i
./src
kopieras till./dist
- Typescript-kompilering körs på alla
.ts
-filer i./dist
och resultat (.js
- och.js.map
-filer) läggs bredvid sina.ts
-filer
När man kör utvecklingsservern (lite-server) används ./dist
som bas-katalog.
NPM-skript
Följande script är definierade i package.json
och kan
köras med npm run \<script-namn\>
:
Huvudskript
- clean: tar bort
./dist
-katalogen - build: kopierar alla filer i
./src
./node_modules
till./dist/
och kompilerar sedan alla typescript-filer under./dist
- dev-server: kopierar alla filer i
./src
till./dist
, kompilerar alla.ts
-filer och startar sedan utvecklingsservern (lite-server) och startar sedan parallellt en bevakning av filförändringar (cpx) som kontinuerligt kopierar alla filer som ändras i./src
till./dist/
, samt en kontinuerlig kompilering av ändrade i.ts
-filer i./dist
-katalogen.
Hjälpskript
- postinstall: vid slutet av körning av
npm install
körstypings
ochnpm run build
- lite: starta lite-server
- cpx: kopier applikationsfiler i
./src
(ts, html, css, png, jpg) till./dist/
- cpx:w: sammas som
cpx
men startar även kontinuerlig bevakning som kopierar dessa filer vid förändringar - cpx-node: kopiera
./node_modules
-filer till./dist/node_modules
- tsc: kör typescript-komplering
- tsc:w: samma som
tsc
men startar även kontinuerlig bevakning av.ts
-filer och kompilerar vid förändring - typings: kör
typings
Rensa
Rensa alla byggartefakter med
npm run clean
Bygga applikationen
Bygg hela applikationen med
npm run build
Kör
Kör applikationen i utvecklings-servern med bevakning alla ändringar och automatisk kopiering och omkompilering.
npm run dev-server
Konfiguration
Typescript-kompilatorn är konfigurerad i tsconfig.js
Typings är konfigurerad i typings.json
Lite-server är konfigurerad i lite-server.json
Installera lokal NodeJS med maven
För den som vill installera en lokal NodeJS för projektet, så finns en maven-pom med stöd för detta. Men det behövs normalt inte.
Kör i så fall för att installera node
mvn package
Sedan kör man alla npm-kommandon med
PATH=$PATH:./node && ./node/npm <kommando>
t.ex
PATH=$PATH:./node && ./node/npm install
PATH=$PATH:./node && ./node/npm run build
PATH=$PATH:./node && ./node/npm run dev-server
Problem på Ubuntu
I Ubuntu 14 och 16 saknas minne för att watchern ska kunna köra. Fixa genom att lägga till
fs.inotify.max_user_watches = 524288
i filen
/etc/sysctl.conf
och läs in med
sudo sysctl -p