[MUSIC]
Ora che hai Node.js sul tuo computer,
ovviamente vuoi iniziare immediatamente a usarlo.
Quindi in questo esercizio inizieremo a usare Node.
Imposteremo un file package.json per la
nostra cartella git-test con cui abbiamo lavorato finora,
quindi imposteremo un modulo Node chiamato come lite-server che
servirà il contenuto della nostra cartella git-test.
E poi possiamo sfogliare questo file index.html e
altri file in un browser.
E vedremo anche come il lite-server
ci permetterà di vedere automaticamente gli aggiornamenti alla nostra
finestra del browser come facciamo modifiche al nostro file index.html o
qualsiasi altro file nella nostra cartella git-test.
Il lite-server è qualcosa che useremo ampiamente in questo e
futuri corsi per essere in grado di vedere i cambiamenti in tempo reale in
una finestra del browser mentre modifichi i file del tuo progetto.
Come ho detto, vogliamo impostare il file package.json.
Quindi, cos'è esattamente questo file package.json che stiamo per impostare?
Quindi qui, ho alcune informazioni
dal sito npmjs.org che specifica qual
è esattamente il ruolo del file package.json.
Quindi il file package.json serve come documentazione
su ciò che tutti gli altri pacchetti da cui dipende il tuo progetto.
Ad esempio, quando imposti il lite-server per
il tuo progetto, questo verrà registrato nel file package.json. In
modo che successivamente, si può anche fare uso di quel pacchetto in futuro.
Inoltre, ti permette di specificare da quale versione specifica di un pacchetto
dipende il tuo progetto.
Quindi, anche se il pacchetto che si dipende da modifiche in futuro,
è possibile insistere sul fatto che si desidera che l'utente installi solo una
versione specifica del pacchetto da utilizzare all'interno dell'applicazione Node.
E inoltre rende le tue build riproducibili, il
che significa che quando condividi il tuo codice con gli altri,
allora possono anche fare l'installazione di tutti i moduli Node,
come vedremo più avanti in questo esercizio, sul proprio computer.
Quindi, ovviamente, la tua prossima domanda sarebbe, come creiamo questo file package.json?
Se si avvia un nuovo progetto, in cui si desidera inizializzare il
file package.json, digitare semplicemente npm init al prompt nella cartella del progetto.
E poi questo ti porterà attraverso una serie di passaggi
che ti permetteranno di configurare il tuo file package.json.
Quindi procediamo con quello per il nostro progetto git-test.
Quindi eccomi qui nella cartella git-test nella mia finestra del terminale.
Assicurati di aprire anche una finestra di terminale o
una finestra di comando e quindi vai alla cartella git-test.
E al prompt, digitare npm init e quindi seguire le domande che vengono poste.
Quindi, per il nome del progetto, lo lasceremo come predefinito, git-test.
Per la versione, lo lasceremo come 1.0.0.
Possiamo modificarlo più tardi.
Per descrizione,
Questa è una directory di test
per imparare Git e Node.
Non importa, digita qualche descrizione lì.
E poi il punto di ingresso, dirò solo index.html.
Di solito se si tratta di un pacchetto Node, il punto di ingresso sarebbe index.js.
Ora, questa cartella che abbiamo impostato è una cartella basata su index.html,
quindi è per questo che digito semplicemente index.html.
Comando di prova, niente.
Git repository, Se avessimo già configurato il repository Git nell'
esercizio precedente, verrà automaticamente richiesto che per voi. In
caso contrario, questo sarebbe vuoto e ti darà la possibilità di digitare l'
URL del repository Git nel caso in cui tu stia usando un repository Git online.
Alcune parole chiave per il tuo progetto, che lascerò vuoto.
Autore, digita il tuo nome.
Cerchiamo di essere narcisisti.
E la licenza.
E poi ti mostrerà la configurazione del file package.json in formato JSON.
Quindi, se hai familiarità con JSON, questo ti sembrerà molto, molto familiare.
Quindi se sembra tutto a posto, diciamo che va bene.
E poi ciò si traduce nella creazione dei file package.json.
Quindi ora se elenchi il contenuto della cartella,
vedresti il file package.json nel contenuto della cartella.
Apri la cartella git-test nel tuo editor preferito e
poi dai un'occhiata al contenuto del file package.json nel tuo editor.
Come passo successivo, impareremo come possiamo installare
un modulo nodo utilizzando NPM, il Node Package Manager.
Quindi abbiamo intenzione di installare questo modulo nodo chiamato come lite-server.
Il lite-server servirà il contenuto di questa cartella git-test in
un server che si avvia, in modo da poter visualizzare il contenuto in un browser.
Dato che abbiamo un file index.html, se serviamo questa cartella
allora sarà un sito web e puoi visualizzare il index.html in un browser.
Quindi cerchiamo di impostare il lite-server e poi vedremo come possiamo fare
uso del lite-server per servire il contenuto di questa cartella.
Questo è molto, molto utile perché se stai lavorando su un progetto di sviluppo web,
vuoi vedere la versione live del tuo progetto di sviluppo web in
modo che quando apporti modifiche al tuo progetto,
puoi vedere le modifiche immediatamente riflesse nel browser.
Quindi questo è un ottimo pacchetto Node che è molto utile per questo scopo.
Quindi impostiamo il lite-server.
Per farlo al prompt, digitare npm install.
Quindi nota, se vuoi che npm installi un pacchetto Node,
questo è il modo in cui lo invocherai.
E poi direbbe lite-server.
E poi vogliamo anche salvare il fatto che il nostro progetto sta usando il lite-server.
Quindi salveremo queste informazioni nel file package.json.
Quindi, per farlo, scriveremo —save-dev.
Ora l'opzione save-dev specifica che questo lite-server viene utilizzato per la
dipendenza di sviluppo per il nostro progetto.
Se stai installando un modulo Node da cui
dipende direttamente il tuo progetto, lo installeresti semplicemente dicendo l'opzione —save.
Quindi andiamo avanti e installarlo.
E aspetti pazientemente che l'installazione avvenga.
Ci vorranno pochi minuti per completare l'installazione.
Una volta installato, si
noterà immediatamente quando si guarda il contenuto della cartella,
si noterà immediatamente che c'è una cartella lì creata denominata node_modules.
Ora, se vai nel node_modules vedrai un sacco
di altre sottocartelle che contengono moduli di nodo che
sono necessari per il modulo nodo lite-sever e così via.
Quindi, facciamo un rapido tour della cartella node_modules per vedere
quali sono i contenuti di questi.
Andando alla mia cartella git-test, se stai andando alla cartella node_modules,
vedresti come ho detto, un sacco di sottocartelle lì.
Normalmente non è necessario eseguire il rendering nella cartella node_modules,
esistono solo lì perché sono necessari per il lite-server.
Così, come si naviga attraverso di voi, dovrebbe una cartella di avviso denominata lite-server qui.
Quando si entra nella cartella lite-server, si noti in particolare la presenza
del file index.js e quindi di un file package.json e molte altre cose.
Quindi questo contenuto della cartella comprende il modulo nodo lite-server.
Ma questo modulo nodo lite-server dipende da altri moduli nodo
per fornire alcune funzionalità aggiuntive.
Quindi questo è il motivo, quando si installa il modulo nodo lite-server, a sua volta
installerà molti altri moduli nodo da cui dipende il lite-server stesso.
Quindi questo è il motivo per cui vedi quell'esplosione di
quelle cartelle all'interno della cartella node_modules.
Non essere troppo preoccupato per questo, la somma totale di tutto questo non sarà più di
poche decine di megabyte.
Quindi, non riempirà la tua directory con quella spazzatura.
Questo è tutto essenziale per il nodo per essere in grado di aiutarti.
Nel caso in cui tu sia curioso di conoscere il lite-server e come funziona e così via.
Puoi sempre andare giù a questo sito GitHub in cui viene pubblicato il lite-server e
quindi cercare la documentazione per lite-server. Vi
presenterò tutto ciò che avete bisogno di sapere su lite-server mentre passiamo attraverso
questo corso e i corsi rimanenti.
Quindi non devi preoccuparti troppo.
Ma nel caso in cui siete curiosi,
si può sempre andare su questo sito per saperne di più su lite-server.
Il link è fornito nelle istruzioni per l'esercizio e nelle
risorse aggiuntive parte di questa lezione.
Una volta completato ciò, vai all'editor,
dove hai la cartella, la cartella git-test, apri e
quindi visualizza il contenuto del file package.json.
Quindi vedresti che il file package.json contiene esattamente le informazioni che
hai configurato con il tuo npm al suo interno.
Quindi vedresti il nome, la versione e l'autore del repository,
e in particolare, nota queste informazioni qui dice devDependencies.
E poi specifica lite-server, e nota anche che dice, ^2.2.2.
Quindi il che significa che questo particolare progetto dipende da
lite-server che è almeno una versione 2.2.2.
Tutto di alto livello.
Quindi questo è molto utile per noi.
Ora, perché abbiamo bisogno di queste informazioni qui, più tardi quando si va agli altri
esercizi, si noterà che quando si memorizza questo su un repository online.
Non vuoi archiviare tutto nella cartella node_modules.
Memorizzeremo solo le informazioni di tutti i file che abbiamo creato.
La cartella node_modules può sempre essere ricreata
digitando nmp install al prompt dei comandi.
E poi basato sulle
devDependencies e dipendenze elencate nel file package.json.
Tutti i moduli nodo da cui dipende il progetto verranno
installati automaticamente.
Vedremo che più avanti,
su come utilizzare npm install in questo corso.
Ora, ora che siamo al file package.json, facciamo un paio di modifiche in modo
che saremo in grado di fare uso del lite-server per servire quel contenuto.
Quindi, proprio qui in questa opzione chiamata script,
aggiungiamo un altro qui.
Quindi diremo, inizia.
Quindi start è un comando che supporta npm
che consente di specificare un sacco di cose che verranno avviate.
Quindi, più tardi, vedremo come faremo uso di questo.
Quindi qui, sto per dire, npm run lite.
E dopo il test,
aggiungerò un'altra voce chiamata,
lite che configurerò come lite-server.
Ok, con queste modifiche, salviamo il file package.json e
ora il nostro progetto è configurato.
In modo che ora, se avvii il lite-server,
il contenuto della tua cartella sarà ora servito nel tuo browser preferito.
Tornando al prompt dei comandi e al prompt.
Se digito npm start, ora capisci perché
ho inserito quella voce chiamata start nel mio file package.json.
Quindi, se dico npm start, qualunque sia l'avvio sia configurato come,
nel file package.json.
Specifichiamo che come npm run lite, e quindi lite è stato specificato come lite-server.
Quindi, in sostanza, stiamo dicendo avviare il lite-server.
Quindi, una volta digitato, npm start, avvierà il lite-server e
servirà il contenuto di questa cartella.
Ora, come si accede al contenuto di questa cartella?
Se si desidera accedervi localmente, si accederà
specificando l'URL come localhost: 3000.
Queste sono le impostazioni predefinite per il lite-server.
Inoltre, questo dovrebbe aprire automaticamente
la finestra del browser del browser predefinito e
quindi mostrare il contenuto di index.html in quella finestra del browser.
Qui, puoi vedere che ho aperto il mio editor e
la mia finestra del browser diretto a localhost: 3000
contemporaneamente side-by-side.
In modo che possiamo vedere come la finestra del browser
rifletterà immediatamente eventuali modifiche che apportiamo ai nostri file nella cartella git-test.
Quindi lasciami andare a index.html.
E poi, per il bene dello spazio, lo consegnero'.
E poi così qui potete vedere che questo è il contenuto di questo.
E poi ora lasciami aggiungere
un altro paragrafo,
e salvare le modifiche.
E poi noterai immediatamente che la modifica che
ho apportato al mio file index.html si riflette nel mio browser.
Questo fornisce un modo molto bello di essere in grado di osservare, in tempo reale,
le modifiche che apporti al tuo codice che vengono riflesse nel tuo browser.
Quindi, quando si lavora su un progetto, sarebbe molto appropriato per
voi essere in grado di vedere i cambiamenti immediatamente.
Quindi, quando apporti una modifica e salvi il file,
il codice modificato viene immediatamente caricato nel tuo browser in modo da
poter vedere immediatamente la modifica riflessa nella finestra del browser.
Questo è uno strumento molto utile mentre stai facendo lo sviluppo del tuo progetto.
Questo è il motivo per cui ti ho presentato al server lite e
configurato in modo che possiamo farne uso mentre sviluppiamo il sito web in questo corso.
Se ricordi, avevamo già impostato la nostra cartella git-test per essere un repository git, in
modo che controllando di nuovo,
vedremo che abbiamo già tre commit nel nostro repository git.
E questo repository git è già nel nostro repository git online,
che abbiamo impostato nell'esercizio precedente, sia su bitbucket che su GitHub.
La mia cartella git-test è sincronizzata con il mio
repository bitbucket in questo particolare esercizio.
Quindi quello che farò ora è mostrarti come puoi escludere alcune
cartelle dalla cartella del tuo progetto e
quindi assicurarti che non siano sincronizzate con il tuo repository online.
Ora, come ho detto, la cartella dei moduli del nodo può sempre essere
ricreata digitando npminstall al prompt.
Ecco perché, quando carichi il contenuto della
tua cartella in un repository git online o
quando fai un commit della cartella nel tuo repository git,
non vuoi che la cartella dei moduli note o tutte le sottocartelle
sotto di esso siano incluse nel, Commit.
Quindi, come escludiamo alcune cartelle o
alcuni file dalla nostra cartella dall'essere archiviati nel nostro repository git.
Quindi, per farlo, imposteremo un file chiamato .gitignore.
Quindi questo è il nome del file, .gitignore.
Quindi, per creare questo file.gitignore, andremo al nostro editor.
Quindi nell'editor nella cartella di test git, creerò un nuovo file.
E lo chiamerò .gitignore.
Si noti che il nome inizia con un punto e
quindi il resto del nome è G-I-T-I-G-N-O-R-E.
Quindi questo è molto,
molto importante che tu abbia impostato la fille con esattamente il nome, .gitignore.
Quindi creiamo questo file chiamato, .gitignore, e
la prima riga di quel file, scriveremo come node_modules.
Quindi ciò significa che,
la cartella del modulo del nodo verrà esclusa dal nostro commit git.
Quindi, una volta creato quel file.gitignore e
poi aggiungo i moduli nodo nel file.gitignore, salviamo le modifiche.
E poi ora faremo un commit dello stato attuale del nostro progetto
nel nostro repository git.
Spero che tu ricordi i tuoi comandi git.
Facciamo uno stato git, e poi quando lo fai,
noterai immediatamente che hai il file index.html
contrassegnato come modificato e poi i due nuovi file, .gitignore e package.json.
Quindi facciamo un git add., e poi facciamo uno stato git.
E poi vedi che tutti questi nuovi file sono stati archiviati nel tuo commit.
Facciamo un git commit, git commit -m «quarto
commit». E i file sono impegnati.
Proponiamo il nuovo commit al nostro repository online.
Quindi, per farlo, git push
-u origin master.
E aspetta che venga spinto sul nostro server.
Ora, se vai al tuo repository git online,
vedrai che il file package.json e
.gitignore sarebbero stati archiviati nel tuo repository git.
Andare al mio repository bitbucket per il git-test.
Vedrai che quando guardo l'origine,
vedrai che il file package.json è stato aggiunto,
il.gitignore è stato aggiunto e il nuovo file index.html è stato archiviato.
Quindi questo completa questo esercizio.
Quindi, in questo esercizio,
abbiamo imparato come impostare un file package.json utilizzando npm minute.
Abbiamo imparato come installare un modulo npm.
E abbiamo imparato come usare il modulo lite server npm per servire
il contenuto della nostra cartella di progetto in modo che possa essere visualizzato in un browser.
Quindi questo è un bel modo di servire i tuoi contenuti, la tua
applicazione web o il tuo sito web in modo
che tu possa vedere i cambiamenti in tempo reale che vengono riflessi nella finestra del tuo browser.
E poi, abbiamo anche visto come possono impostare il.gitignore in modo che alcune
cartelle possano essere escluse dall'essere archiviate nel nostro repository git.
Questo completa questo esercizio.
Quindi con questo, sono sicuro che avresti ottenuto una buona gestione
sull'uso di entrambi git e quindi anche dei moduli nodo e nodo.
Non ti preoccupare.
Useremo nodo ampiamente in vari modi
come si passa attraverso i corsi di questa specializzazione.
Questo è solo un inizio.
[ MUSIC]