---

Ottobre 2015

Volume 30 Numero 10

Il presente articolo è stato tradotto automaticamente.

Visual Studio - Bower: strumenti moderni per lo sviluppo Web

Da Adam Tuliper | Ottobre 2015

Per un periodo lungo, long, abbiamo vissuto un giardino parete eccezionali. In questo insieme protetto di sviluppo Web, abbiamo utilizzato la tecnologia sofisticata come ASP.NET e Visual Studio. Il resto degli strumenti del mondo sono stati considerati piuttosto inferiore. Siamo parte di un empire sarà, se è stato un ottimo luogo per molto tempo.

Tuttavia, quando è trascorso, impostazioni cultura di sviluppo, strumenti, risorse e altro sono diventati anche caotiche e frammentati. Ma durante questo periodo, inclusi i Bootstrap, AngularJS, Git, jQuery, noioso, confessano e Bower, ha l'insorgere di alcune tecniche piuttosto solido e gli sviluppatori Web abituati all'ecosistema Microsoft sono in grado di sfruttare i vantaggi di questi strumenti.

Nella prima parte di una serie di due articoli, verrà fornita una panoramica di Bower, principalmente per la gestione pacchetti (ma non è limitato a) sviluppo Web front-end. Nel secondo articolo, mi occuperò noioso e confessano, due canali di attività basate su JavaScript che può essere utilizzato per eseguire tutti i tipi di attività, come copia di file, minimizzazione, concatenazione e persino la compilazione.

Noioso, confessano e Bower sono strumenti aggiuntivi l'arsenale di sviluppo Web. Strumenti per l'integrazione con loro incorporato in Visual Studio 2015 e disponibile tramite i componenti aggiuntivi per Visual Studio 2012 e 2013. È comunque necessario installarli.

Alcuni dei è lecito chiedersi se Microsoft sta è apprendere e utilizzare anche altri strumenti. Non NuGet funziona perfettamente per i pacchetti e non è sufficiente come uno strumento di compilazione msbuild? La risposta a entrambe le domande è Sì, in molte ma non tutti gli scenari. E nei casi in cui non è sufficiente strumenti convenzionali, noioso, confessano e Bower. In un progetto Web, è possibile compilare il Sass ogni volta che viene modificato un file CSS. Oppure è possibile ottenere la versione più recente di Bootstrap o angolare senza attendere che un utente di Microsoft per il nome di un pacchetto NuGet. È Impossibile eseguire attività con NuGet o msbuild.

NuGet è una tecnologia awesome e continua a essere sviluppate, supportato e perfettamente integrato in Visual Studio. Continuare a utilizzarlo per i progetti, in particolare per i file binari e i progetti che è necessario apportare modifiche alle soluzioni Visual Studio. Ogni volta che una nuova versione di jQuery o Bootstrap uscirà, tuttavia, un utente deve creare e rilasciare un pacchetto NuGet per esso. Ma poiché Bower possono utilizzare il controllo delle versioni semantico, come uno strumento viene rilasciato e contrassegnato in GitHub, Bower possibile utilizzarlo. non è necessario attendere che qualcun altro pacchetto in un pacchetto NuGet.

Utilizzerò nodo Package Manager (npm) per l'installazione di Bower e per diversi elementi nel prossimo articolo. Poiché npm non è fornito come download autonomo, è sufficiente installare Node. js da nodejs.org. Per ulteriori informazioni sull'installazione e utilizzo npm, visitare il sito Microsoft Virtual Academy "Pacchetto di automazione della gestione e del flusso di lavoro" pagina in bit.ly/1EjRWMx.

Bower è una gestione pacchetti principali in genere utilizzata per lo sviluppo Web front-end e, in effetti è la soluzione di gestione pacchetti front-end soltanto. La maggior parte dei pacchetti utilizzati nello sviluppo Web front-end, quali i Bootstrap jQuery e AngularJS, possono essere installati mediante npm o Bower, ma in molti casi la gestione delle dipendenze può essere un po' più semplice con Bower (anche se alcune potrebbero non Accetto).

Bower pacchetti, a differenza dei pacchetti NuGet, non sono limitati a un tipo di origine singolo. Un pacchetto Bower può essere un endpoint di Git, una cartella nel file system, un URL per i file di contenuto o compressi file e altro ancora. Bower si integra con un registro di sistema di pacchetto che elenca i pacchetti pubblicati, ma non i pacchetti devono essere elencati in Bower sia installato.

Installazione e utilizzo di Bower

Estrae generalmente da un repository Git, pertanto è necessario installare msysgit (msysgit.github.io) e selezionare l'opzione per eseguire dalla riga di comando, come illustrato nella bower Figura 1.

Figura 1 installazione msysgit con il supporto della riga di comando

È utilizzare npm per installare Bower globale in modo è possibile utilizzare da qualsiasi posizione nel sistema. È sufficiente installare Bower una volta, non al progetto.

npm install -g bower

Ora è impostato per utilizzare Bower. Aprire una riga di comando per la radice della cartella di progetto e utilizzare il formato seguente per installare un pacchetto nel progetto:

bower install <package name/url/zip/etc.> --save

Ad esempio, per installare jquery, è sufficiente immettere:

bower install jquery --save

Le prime tre parole probabilmente hanno senso, ma --save potrebbe essere necessario alcune spiegazioni. Questo parametro genera una voce da scrivere nel file bower.json notare che è stato installato il pacchetto. (Bower non crea questo file per impostazione predefinita, è necessario indicare a tale scopo, come verrà illustrato tra breve). Per impostazione predefinita, il comando di installazione Bower crea una cartella bower_components nella cartella in cui è eseguito il comando di installazione. il nome della cartella bower_components può essere personalizzato utilizzando un file di configurazione Bower .bowerrc.

Si noterà che nel Figura 2 il pacchetto di installazione di jQuery risultati in molti altri file e cartelle rispetto a quanto previsto. Vorrei nel progetto è jQuery.js, ma in questo caso Ottiene la struttura di codice sorgente jQuery intero. Installa pacchetto molti effettivamente consentono di struttura del codice sorgente intero spesso significativamente più del necessario. In questo modo i nuovi utenti Bower chiedendo il file da utilizzare.

Figura 2 viene installato Bower jQuery l'intero albero di origine

Alcuni progetti rilascerà una versione compressa di app meno non si desidera che tutti i file aggiuntivi. Ad esempio, il pacchetto Bower AngularJS non è un repository fuori della radice angolare su GitHub all'indirizzo github.com/angular/bower-angular. Quando si installa il pacchetto (installazione bower angolare: salvare), si ottiene solo il. js e. CSS, è necessario fare riferimento nelle pagine HTML.

Per trovare pacchetti, è possibile passare a bower.io, utilizzare Visual Studio IntelliSense (descritta più avanti) o Cerca nell'archivio del pacchetto Bower tramite la riga di comando:

bower search jquery

È inoltre possibile installare più pacchetti in una sola volta, un ottimo sistema per le installazioni di script:

bower install jquery bootstrap-css angular
#or install a specific version of jquery ui
bower install jquery-ui#1.10.4
#install a github repository as a package
bower install https://github.com/SomeRepository/project.git

Bower crea una cache locale dei pacchetti che installazione. Il sistema di Windows 8 e 10 di Windows, la cartella della cache predefinita è C:\Users\ < nome > \AppData\Local\bower\cache\packages (è possibile ignorare questa impostazione predefinita nel file .bowerrc). Come può vedere nella Figura 3, è possibile gestire i pacchetti memorizzati nella cache tramite l'elenco e i comandi per la pulitura. Si noti che in caso affermativo ogniqualvolta si esegue l'installazione di bower Bower richiamerà dalla cache locale.

Figura 3 utilizzo locale Bower Cache

#install jquery package for the first time
bower install jquery
#uninstall jquery package
bower uninstall jquery
#install from cache (ie works disconnected)
bower install jquery --offline
#show me the cache
bower cache list
#clean local cache
bower cache clean
#will fail, package no longer cached
bower install jquery --offline

Per i pacchetti che dipendono da altri pacchetti, Bower tenta di installare le dipendenze richieste nel file system. Bower dispone di una struttura di dipendenze flat, vale a dire tutte le dipendenze necessarie vengono installate sotto /bower_components, non con il pacchetto che lo richiede. Ad esempio, il file bower.json per jQuery UI elenca una dipendenza di "jquery": "> = 1,6" vale a dire se jQuery non è ancora installato, verrà installata la versione più recente del pacchetto jQuery /bower_components, come è almeno la versione 1.6.

L'aggiornamento o disinstallazione dei pacchetti è piuttosto semplice e include i controlli di versione e delle dipendenze:

#will update based on version rules in bower.json, ex. "jquery": "~2.1.3"
#specifies any patch like 2.1.4 is acceptable to update, but 2.2.0 is not
bower update jquery
#will remove folder and reference in bower.json, but will prompt first
#if other packages have a dependency on jquery
bower uninstall jquery

Il File bower.json

A questo punto se si elimina la cartella /bower_components, è non necessario è chiaro quali pacchetti sono stati installati o richiesto dall'applicazione di esempio. Se non è assegnato il codice sorgente (con alcun pacchetto) a un altro sviluppatore o viene portato a un altro ambiente, ad esempio un server di compilazione senza la cartella bower_components, tale sviluppatore e sarebbe fortuna. Se si ha familiarità con NuGet, è simile alla mancanza di file Packages. In teoria, si desidera un file bower.json nell'applicazione in modo Bower può tenere traccia delle dipendenze di pacchetto e le versioni, ma è facoltativo.

Per creare il file bower.json, eseguire il comando init bower nella radice del progetto e seguire le istruzioni, come illustrato nella Figura 4.

Figura 4 creazione di un File bower.json

C:\Users\Adam\Documents\WebApp> bower init
? name: MyWebApp
? version: 1.0.0
? description:
? main file:
? what types of modules does this package expose?
? keywords:
? authors: Adam Tuliper <adam.tuliper@gmail.com>
? license: MIT
? homepage:
? set currently installed components as dependencies? (Y/n) Y
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? (y/N)

Se si dimentica di creare un file bower.json e installare una serie di pacchetti senza di essa o dimentica di aggiungere tali pacchetti utilizzando-opzione di salvataggio, non c'è problema. Quando si esegue il comando init bower, verrà chiesto "set attualmente installati componenti come dipendenze?" Rispondere affermativamente significa Bower analizza i pacchetti in /bower_components e aggiungere determina sia i pacchetti radice nella sezione delle dipendenze. Si noti, tuttavia, se jQuery UI dipende jQuery, jQuery non viene aggiunto come dipendenza nel file di questo metodo installata durante l'installazione dell'interfaccia utente jQuery. È sempre opportuno esaminare questo generato dipendenze sezione affinché accetti le dipendenze devono essere elencate.

A questo punto è possibile inizializzare Bower per il progetto dalla riga di comando, in genere nella cartella radice del progetto Web. Quindi possibile installare le dipendenze. Viene illustrato un file di esempio bower.json in Figura 5.

Figura 5 esempio bower.json File

{
  "name": "MyWebApp",
  "version": "0.0.0",
  "authors": [
    "Adam Tuliper <adam.tuliper@anonymous>"
  ],
  "license": "MIT",
  "ignore": [
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "~1.4.3",
    "bootstrap-css": "~3.3.4",
    "jquery-ui": "~1.11.4"
  },
   "devDependencies": {
    "angular-mocks": "~1.4.3"
  }
}
}

Nella sezione superiore contiene informazioni generali di progetto e del pacchetto. Altre sezioni vale la pena citare vengono ignorate, dipendenze e devDependencies. La sezione Ignora esclude i file indicati nel caso fosse possibile creare un pacchetto di Bower da questa applicazione. Poiché sono utilizzo di un'applicazione Web e non crea il proprio pacchetto Bower, questo non è valida. Le dipendenze e devDependencies sezioni contengono tutti i pacchetti ho installato che verranno utilizzati dall'applicazione di esempio; si sta trattati nella sezione successiva in modo più dettagliato.

Gestione delle dipendenze

Si è visto che è possibile specificare due diversi tipi di dipendenze in un file bower.json: devDependencies e dipendenze. Le dipendenze vengono aggiunte quando si chiama, ad esempio, gli elementi bower installare jquery - Salva. Si tratta di pacchetti (ad esempio jQuery) che verranno eseguiti nell'ambiente di produzione per l'applicazione. Le voci devDependencies, d'altra parte, sono pacchetti che in genere non renderlo nell'ambiente di produzione, ad esempio Framework di simulazione come angolare simulazioni o meno / sass compilatori. Queste voci vengono aggiunte quando si utilizza, ad esempio, gli bower installazione angolare-oggetti simulati - opzione save-dev. Questi tipi di due dipendenza sono indicati solo nel file bower.json e non influiscono su come utilizzare questi file nel file system nell'applicazione. Se si esegue un ripristino di pacchetti, ad esempio, un ambiente di controllo di qualità, teoricamente è non sarebbe necessario installare il devDependencies.

Per installare tutte le dipendenze solo nella sezione delle dipendenze e ignorare tutti gli elementi devDependencies, ad esempio quando la creazione di una produzione compila, utilizzare semplicemente bower installare-produzione.

Se si desidera visualizzare tutte le dipendenze nell'applicazione viene utilizzato, è possibile eseguire elenco bower, che produce output simile al seguente:

bower check-new     Checking for new versions of the project dependencies..
MyWebApp#0.0.0 C:\Users\Adam\Documents\MyWebApp
├── angular#1.4.3 (1.4.4-build.4147+sha.bb281f8 available)
├─┬ angular-mocks#1.4.3 (1.4.4-build.4147+sha.bb281f8 available)
│ └── angular#1.4.3 (latest is 1.4.4-build.4147+sha.bb281f8)
├── bootstrap-css#3.3.4
├─┬ jquery-ui#1.11.4
│ └── jquery#2.1.4 (3.0.0-alpha1+compat available)
└── jquery1#2.1.4 (3.0.0-alpha1+compat available)

Troppi file

Nuove presenze Bower realizzare rapidamente che alcuni pacchetti contengono molti file mentre potrebbe essere necessario un solo file. Alcuni pacchetti Bower elenco uno o più file nella sezione di configurazione principale che sono necessari per utilizzare il pacchetto. Ad esempio, jQuery è circa 90 file del pacchetto durante l'installazione. Ma per utilizzare jQuery, è necessario solo jQuery.js, pertanto la soluzione consiste nell'esaminare principale e si noti che per jQuery siano elencati solo un singolo file nella cartella /dist:

{
  "name": "jquery",
  "version": "2.1.4",
  "main": "dist/jquery.js",
...
}

Se si cerca nella cartella /dist per jQuery, sono inoltre disponibili il jQuery.min.js e il file MAP corrispondente per il debug, anche se non avrebbe senso elenco questi nell'elemento principale perché l'intenzione è jQuery.js o jQuery.min.js viene utilizzata in produzione, non entrambi.

Elenco bower in esecuzione - percorsi restituisce tutti i file principali per ogni pacchetto installato, come illustrato di seguito:

C:\Users\Adam\Documents\MyWeb> bower list --paths
  angular: 'bower_components/angular/angular.js',
  'bootstrap-css': [
    'bower_components/bootstrap-css/css/bootstrap.min.css',
    'bower_components/bootstrap-css/js/bootstrap.min.js'
  ],
  jquery: 'bower_components/jquery/dist/jquery.js'

Il carico è agli autori dei pacchetti per garantire che vengono elencati i file appropriati nella sezione principale.

Poiché, per impostazione predefinita, tutti i file di pacchetto sono nella sottocartella /bower_components, si potrebbe pensare che i file HTML fa riferimento a file subito questa cartella come indicato di seguito:

<link rel="stylesheet" type="text/css"
  href="/bower_components/bootstrap-css/css/bootstrap.min.css">
<script src="/bower_components/bootstrap-css/js/bootstrap.min.js" />
<script src="/bower_components/angular/angular.js" />
<script src="/bower_components/jquery/dist/jquery.js" />

È possibile trovare molti esempi su Internet e fare riferimento ai file all'interno della cartella /bower_components. Questo non è una pratica pulita. Sconsiglio che e, per quanto mi riguarda, non desidera distribuire tale cartella e potenzialmente centinaia o migliaia di file nell'ambiente di produzione quando è necessario solo un numero limitato di file da minimizzare e concatenato anche meno file. Verrà analizzato le tecniche di quest'ultime nel prossimo articolo noioso e confessano, ma per ora, verrà preso in esame una delle diverse tecniche disponibili per estrarre questi file principali in un modo migliore mediante il modulo bower installer.

Il modulo bower programma di installazione copierà tutti i file principali della struttura di cartella specificata. Installare innanzitutto questo modulo globale nel computer in uso tramite npm install -g bower-installazione guidata.

Successivamente, aggiungere una sezione al file di bower.json per specificare dove devono essere copiati i file principali:

"install": {
  "path": "lib"
},

I file principali per ogni pacchetto finirà in una sottocartella \lib in questo caso, ad esempio, lib\jquery\jQuery.js, lib\angular\angular.js.

È possibile personalizzare questo processo abbastanza. Assicurarsi di consultare la documentazione di tale pacchetto all'indirizzo bit.ly/1gwKBmZ.

Infine, eseguire bower installer ogni volta che si desidera che i file copiati nelle cartelle di output. Anche in questo caso, esistono altri modi, ad esempio utilizzando noioso o confessano di copiare i file utilizzando un'attività, è anche possibile controllare le cartelle per le modifiche, ma si tratta di un rapido, modo di dipendenza minima di farlo quando si avvia che non richiede altri flussi di lavoro.

Server di compilazione e controllo del codice sorgente

Cosa accade quando si desidera installare i pacchetti necessari in un server di compilazione? Ciò è utile negli scenari in cui è noto solo il codice nel controllo del codice sorgente e tutti gli altri pacchetti (Bower/NuGet e così via) vengono installati e/o compilati (Sass meno CoffeeScript e simili) in un server di compilazione. Alcuni negozi darà origine a controllare tutti gli elementi, inclusi tutti i file binari e le dipendenze di terze parti. Altri si affidano package manager per ripristinare i pacchetti in un ambiente di compilazione. Quando viene fornito un progetto Visual Studio a un utente, in genere previsto i pacchetti da ripristinare nel proprio computer. Tipico per Bower in relazione al controllo del codice sorgente, tuttavia, si consiglia controllo del codice sorgente tutto il codice di terze parti, se si tollera repository potenzialmente elevato o se non si desidera si basano su package manager, in caso contrario non origine /bower_components di controllo.

Per installare tutte le dipendenze e copiare i file principali utilizzando un file di bower.json, è sufficiente eseguire i comandi seguenti:

#Will read bower.json and install referenced packages and their dependencies
bower install
#Optional - copy each packages main{} files into your predefined path
bower-installer

Perché non solo npm?

Alcuni sviluppatori è sufficiente utilizzano npm, altre scegliere Bower e alcuni utilizzano una combinazione. Sono disponibili molti pacchetti che si trovano in Bower sia il repository pacchetto npm, che semplifica il flusso di lavoro in ogni caso. Npm funziona bene non solo per le applicazioni Node. js, ma anche per la gestione dei pacchetti sia sul lato client e lato server. Npm dispone di una struttura di dipendenze nidificati, vale a dire che per ogni pacchetto di che installare tutte le relative dipendenze siano installate nella sottocartella node_components del pacchetto. Ad esempio, se si utilizzano tre pacchetti e ciascuno di essi utilizza jQuery, jQuery intero pacchetto viene installato tre volte separati. Dipendenze nidificate possono creare piuttosto una catena di dipendenze lunghe. Gli utenti di Windows di npm sono quasi sicuramente a un certo punto da eseguire tra l'errore di lunghezza del percorso temuto per questo motivo, ad esempio: ... La \node_modules\somePackageB\node_modules\insight\node_modules\inquirer\node_modules\readline2\node_modules\strip-ansi\node_modules\ansi-rege directory C:\Users\Adam\...\node_modules\somePackageA nome è troppo lungo.

Si tratta sottoprodotto della struttura di dipendenze npm nidificate, anche se la versione beta di npm 3 dispongono di una funzionalità Appiattisci. Non è l'obiettivo di convincerli di uno o un altro come è invece possibile utilizzare entrambi.

Bower, 5 ASP.NET e Visual Studio

Visual Studio 2015 include il supporto incorporato per Bower e npm, inclusa l'installazione di pacchetti e IntelliSense. Le versioni precedenti di Visual Studio è possono ottenere la stessa funzionalità scaricando e installando l'estensione di IntelliSense pacchetto gratuito per Visual Studio. Figura 6 vengono illustrate alcune delle opzioni disponibili gestire i pacchetti all'interno di un file bower.json.

Figura 6 opzioni pacchetto in Visual Studio

Come può vedere nella Figura 7, quando si digita un nome di pacchetto IntelliSense fornisce corrispondenti pacchetti e le versioni, il salvataggio di una riga di comando o Web di ricerca. Quando si apportano modifiche al file bower.json e salvarlo, il pacchetto verrà installato in locale senza dover passare alla riga di comando. Non è qui che Visual Studio specifico da un punto di vista del file. In altre parole, un bower.json predefinito da qualsiasi progetto Web funziona senza problemi.

Figura 7 Bower IntelliSense in Visual Studio

Figura 8 Mostra dipendenze da bower.json in Esplora soluzioni, che indica la modalità Bower è completamente integrato in progetti Web e Visual Studio.

Figura 8 Bower dipendenze in Esplora soluzioni

Con ASP.NET 5, è disponibile una nuova struttura di progetto in cui tutti i file nella cartella del progetto sono inclusi nel progetto per impostazione predefinita, ma solo gli elementi nella cartella /wwwroot del progetto Web possono essere indirizzati come contenuto statico, ad esempio HTML, CSS, immagini e file JavaScript. Pertanto, è possibile impostare la configurazione bower.json in modo che bower installer copia le dipendenze in questa cartella (anche se i modelli ASP.NET 5 di casella utilizzano confessano per copiare file preimpostati alle relative destinazioni, come verrà analizzato nel prossimo articolo).

Pacchetti NuGet sono ancora perfetto utilizzate molto frequentemente e supportati, ovviamente, nei progetti ASP.NET 5. Come nota a margine, le impostazioni di NuGet andare nella sezione delle dipendenze del project.json, ma visualizzati con riferimenti in Visual Studio. Pacchetti NuGet sono utilizzati out-of-the-box per i pacchetti sul lato server, ad esempio il supporto di registrazione e MVC.

Avvolgendo

Bower è un ottimo strumento che può essere facilmente integrato nel flusso di lavoro front-end. L'API è semplice da utilizzare e con il supporto integrato in Visual Studio, è possibile utilizzare, con npm e NuGet per gestire i pacchetti sia front-end e back-end. Richiedere un'ora o all'apprendimento Bower; sarete felici che è stato fatto.

---

Adam Tuliperè un senior technical evangelist presso Microsoft che vivono in SoCal soleggiato. È un sviluppo Web, sviluppo di gioco, autore di Pluralsight e tutti gli amanti tech versatile. Trovarlo su Twitter @AdamTuliper o adamt@microsoft.com.

Grazie all'esperto tecnico Microsoft seguente per la revisione di questo articolo: Michael Palermo