Costruisci strumenti
Scopri come utilizzare gli script npm inclusi in Bootstrap per creare la nostra documentazione, compilare il codice sorgente, eseguire test e altro ancora.
Configurazione degli utensili
Bootstrap utilizza gli script npm per il suo sistema di compilazione. Il nostro package.json include metodi convenienti per lavorare con il framework, inclusa la compilazione del codice, l'esecuzione di test e altro ancora.
Per utilizzare il nostro sistema di compilazione ed eseguire la nostra documentazione in locale, avrai bisogno di una copia dei file sorgente e di Node di Bootstrap. Segui questi passaggi e dovresti essere pronto per il rock:
- Scarica e installa Node.js , che utilizziamo per gestire le nostre dipendenze.
- Scarica i sorgenti di Bootstrap o esegui il fork del repository di Bootstrap .
- Passa alla
/bootstrap
directory principale ed eseguinpm install
per installare le nostre dipendenze locali elencate in package.json .
Al termine, sarai in grado di eseguire i vari comandi forniti dalla riga di comando.
Utilizzo di script npm
Il nostro package.json include i seguenti comandi e attività:
Compito | Descrizione |
---|---|
npm run dist |
npm run dist crea la /dist/ directory con i file compilati. Utilizza Sass , Autoprefixer e terser . |
npm test |
Esegue i test in locale dopo l'esecuzionenpm run dist |
npm run docs-serve |
Crea ed esegue la documentazione in locale. |
Esegui npm run
per vedere tutti gli script npm.
Sass
Bootstrap v4 utilizza Node Sass per compilare i nostri file sorgente Sass in file CSS (inclusi nel nostro processo di compilazione). Per ottenere lo stesso CSS generato durante la compilazione di Sass utilizzando la propria pipeline di risorse, è necessario utilizzare un compilatore Sass che supporti almeno le funzionalità di Node Sass. Questo è importante da notare perché a partire dal 26 ottobre 2020, LibSass e i pacchetti basati su di esso, incluso Node Sass, sono obsoleti .
Se hai bisogno di funzionalità Sass più recenti o compatibilità con gli standard CSS più recenti, Dart Sass è ora l'implementazione principale di Sass e supporta un'API JavaScript completamente compatibile con Node Sass (con alcune eccezioni elencate nella pagina GitHub di Dart Sass ).
Aumentiamo la precisione di arrotondamento di Sass a 6 (per impostazione predefinita, è 5 in Node Sass) per evitare problemi con l'arrotondamento del browser. Se usi Dart Sass, questo non sarà qualcosa che devi regolare, poiché quel compilatore utilizza una precisione di arrotondamento di 10 e per motivi di efficienza non ne consente la regolazione.
Prefisso automatico
Bootstrap utilizza Autoprefixer (incluso nel nostro processo di compilazione) per aggiungere automaticamente i prefissi dei fornitori ad alcune proprietà CSS in fase di compilazione. Ciò ci consente di risparmiare tempo e codice consentendoci di scrivere parti chiave del nostro CSS una sola volta eliminando la necessità di mixin dei fornitori come quelli che si trovano nella v3.
Manteniamo l'elenco dei browser supportati tramite Autoprefixer in un file separato all'interno del nostro repository GitHub. Vedere .browserslistrc per i dettagli.
Documentazione locale
L'esecuzione della nostra documentazione in locale richiede l'uso di Hugo, che viene installato tramite il pacchetto hugo-bin npm. Hugo è un generatore di siti statici incredibilmente veloce e abbastanza estensibile che ci fornisce: include di base, file basati su Markdown, modelli e altro ancora. Ecco come iniziare:
- Esegui la configurazione degli strumenti sopra per installare tutte le dipendenze.
- Dalla
/bootstrap
directory principale, eseguinpm run docs-serve
nella riga di comando. - Apri
http://localhost:9001/
nel tuo browser e voilà.
Scopri di più sull'utilizzo di Hugo leggendo la sua documentazione .
Risoluzione dei problemi
In caso di problemi con l'installazione delle dipendenze, disinstallare tutte le versioni precedenti delle dipendenze (globale e locale). Quindi, riesegui npm install
.