2016-01-14 31 views
8

Attualmente il mio processo di costruzione è:Utilizzando webpack per generare librerie dattiloscritto con i file di battitura

  • Scrivi un sacco di file dattiloscritto con la sintassi del modulo ES6
  • generare un index.ts che riesportazioni tutti i moduli da un punto
  • Compila per CommonJS + sistema
  • descrittori di uscita/Digitando file

Questo si traduce in una file index.js che ri-esporta tutti i file interni senza che lo sviluppatore lo consumi e ne ha bisogno, così come un sacco di file d.ts che rispecchiano la struttura del file.

Ora questo funziona, ma se dovessi prendere questo approccio al browser avrei bisogno di eseguire il webpack su tutti i js o sarebbe un incubo di richiesta http che inserisca tutti i singoli file. Attualmente questa libreria verrebbe utilizzata come dipendenza da altre librerie, quindi non è un punto finale per la logica o qualsiasi cosa sia un modulo/libreria.

Ora la domanda principale è con webpack so che posso caricare TS in e ottenere un modulo commonJS, tuttavia non riesco a trovare alcun modo per generare file d.ts con webpack. Quindi c'è un modo per me di usare webpack come compilatore/packager in questo scenario e avere un'uscita my-lib.js e my-lib.d.ts piuttosto che l'approccio attuale che produce molti file singoli.

== Chiarimento extra su Use Case ==

solo per cercare di assicurarsi che tutti sono sulla stessa pagina qui quando dico che è una libreria che potrebbe essere riutilizzato quello che voglio dire è che questo è qualcosa che verrebbe caricato tramite npm o jspm o qualcosa come una dipendenza del modulo per altri moduli.

Quindi, per esempio, facciamo finta che jQuery non esista e io lo creerò ma lo scriverò in dattiloscritto affinché altri sviluppatori possano consumare sia in JS che in TS. Ora dattiloscritto genera sia i file js che i file d.ts, i file js devono essere usati come ci si aspetterebbe, ma i file d.ts spiegano ad altri file dattiloscritto quali sono i tipi contenuti nella libreria.

Quindi, supponendo di aver sviluppato jquery in TS come elencato sopra, vorrei quindi pubblicare questo output (sia esso creato da webpack o tsc) su npm/jspm/bower ecc. Quindi altri possono riutilizzare questa libreria nei loro progetti.

Pertanto, il pacchetto Web in genere viene utilizzato per il pacchetto di "applicazioni", se lo si desidera, che contiene aspetti logici e aziendali e viene utilizzato direttamente come punto di ingresso per una serie più ampia di problemi. In questo esempio verrà utilizzato come una fase di compilazione e di impacchettamento per una libreria e verrà consumato tramite var myLib = require("my-lib"); o simile.

+0

Cosa significa d.ts per il browser? Come sarà usato? –

+0

d.ts non è per browser è per la "libreria", come detto questo intero progetto sarebbe stato consumato come libreria/modulo, quindi il d.i file ts sono specifici per la verifica della dattilografia, quindi se volessi usare i tipi in questa libreria in un altro progetto dattiloscritto avrei bisogno di un file d.ts per descrivere i tipi. Come se stessimo scrivendo jquery in dattiloscritto e volevo ottenere webpack per convertire tutti i file dattiloscritti in un unico file jquery.js per l'inclusione ovunque, ma anche un jquery.d.ts per coloro che volevano scrivere dattiloscritto inclusi i tipi in jQuery. – Grofit

+0

Non capisco completamente :) Ma molto probabilmente impossibile. Per quanto ne so, anche per creare un file semplice e compresso sono necessarie due configurazioni e due processi. –

risposta

1

La generazione dei file .d.ts non è correlata al webpack. Con il webpack puoi usare ts-loader o awesome-typescript-loader. Entrambi fanno uso di tsconfig.json. Quello che devi fare è aggiungere declaration: true nel tuo tsconfig.json.

Ti suggerisco anche di dare un'occhiata a typescript-library-starter. Scoprirai come è impostato lì, incluso il bundle UMD e le definizioni dei tipi :).