Przyszła kolej zająć się strukturą plików, zależnościami oraz zadbać o spójność kodu.

NPM

NPM - to menadżer pakietów, który pomoże nam opisać projekt i zdefiniować zależności, których wymaga. Od tego momentu pozbędę się wszystkich zewnętrznych bibliotek z repozytorium na Gicie, bo nie powinno ich tam być. Teraz będzie znajdował się tam sam projekt, a dzięki NPM, wszystkie zależności, które są zdefiniowane w pliku package.json będą mogły być zainstalowane jedną prostą komendą:

npm install

Oczywiście najpierw musimy mieć NPM, ale instalacja jest banalnie prosta. Ja zainstalowałem Node.js, gdzie NPM jest dołączony.

Definiowanie zależności

Aby utworzyć plik package.json dla naszego projektu, możemy posłużyć się poleceniem:

npm init

które na podstawie kilku pytań wygeneruje go dla nas automatycznie.

Następnie, aby pobrać nasze zależności i je dołączyć do pliku package.json wykonujemy polecenie:

npm install nazwa-pakietu --save

gdy paczki są niezbędne do uruchamiania środowiska/aplikacji (np. JQuery, Bootstrap), lub

npm install nazwa-pakietu --save-dev

gdy paczka niezbędna jest do rozwijania i testowania aplikacji (np. ESLint).

Wszystkie nasz paczki trafiaja do folderu node_modules. Znajdziemy tam też całą masę innych zależności, które są wymagane przez nasze zależności, więc nie powinniśmy się przestraszyć ilością podfolderów w nim zawartych. Nasze paczki znajdziemy po tej samej nazwie, którą wywołaliśmy do instalacji, a interesujące nas pliki zazwyczaj w podfolderze dist. Dla przykładu, w HTML załączamy je w ten sposób:

<!-- Head -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/libs/bootstrap.min.css">
<!-- Body -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

ESLint

ESLint - jest to narzędzie, które dba o to, aby nasz styl kodu JS był zgodny z wcześniej zdefiniowanymi standardami. Wszystko za sprawą reguł, które możemy definiować też sami. Np. jeśli zadeklarujemy regułę, że po każdym if ma się znaleźć klamra ({), to ESLint dopilnuje, aby ta reguła była przez nas przestrzegana i wskaże nam miejsce, gdzie popełniliśmy błąd. Dzięki temu nasz kod będzie spójny i czysty.

Można też użyć gotowych popularnych styli jak np. styl Google czy airbnb. Osobiście używam ten od airbnb.

Instalujemy ESLint i dodajemy do zależności, ale z parametrem -dev, gdyż to potrzebne jest tylko nam - developerom.

npm install eslint --save-dev

Konfiguracja

Potrzebny będzie nam plik konfiguracyjny .eslintrc.json . Możemy automatycznie go wygenerować za pomocą polecenia:

node_modules\.bin\eslint --init

i odpowiedzi na kilka pytań. Teraz możemy dodać skrypt NPM dla ESlinta, który będziemy mogli uruchamiać w terminalu.

W naszym pliku powinien się znajdować już jeden skrypt (jeśli zostawiliśmy pytanie “test command” puste):

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
},

Możemy edytować ten lub dodać nowy:

"scripts": {
    "lint": "eslint js/*.js"
},

Dzięki temu skryptowi będziemy mogli w konsoli uruchomić polecenie:

npm run lint

Które sprawdzi dla nas wszystkie pliki JS w folderze js.

Jednak używanie ESLint w konsoli nie jest zbyt szczęśliwe, gdyż musimy ręcznie odszukiwać błędy. Dlatego dobrym rozwiązaniem jest aktywować go w naszym IDE, jeśli wspiera taką opcję. Ja używam tego od JetBrains i na szczęście jest taka opcja, co znacznie ułatwia pracę.

Jeśli używasz PHPStorm lub WebStorm to znajdziesz taką opcję w: File | Settings | Languages and Frameworks | JavaScript | Code Quality Tools | ESLint

Jeśli ESLint zgłasza błedy z elementów Jquery(np. $), DOM(np. document) dodaj do pliku .eslintrc.json informację:

  "env": {
    "browser": true,
    "jquery": true
  },