Comment compiler un projet TypeScript vers un seul fichier JS afin qu'il soit utilisable dans le navigateur

Question

Je dois écrire un SDK Javascript pour un petit projet sur lequel je travaille. Pour ce faire, j'avais pensé à créer un projet TypeScript et à le compiler en un seul fichier Javascript, afin que les utilisateurs de mon SDK puissent simplement injecter ce fichier dans leurs pages web.

Cependant, je viens juste de savoir que si j'utilise import, et que je tente de compiler en un seul fichier, alors il ne supporte que SystemJS. Alors, comment compiler un projet TypeScript en un seul fichier JS afin qu'il soit utilisable dans le navigateur?

En utilisable dans le navigateur, je veux dire que si je crée une classe App dactylographiée, alors je pourrais le faire dans la console dev:

var x = new App(); 

Je suis dans ce domaine depuis plus d'une heure maintenant, et tout ce que j'ai trouvé semble suggérer que ce n'est pas possible.

---

Edit:Thisn'a pas vraiment répondu à ma question. Comme je l'ai dit dans l'exemple, j'ai besoin de la fonctionnalité que s'il y a une classe appelée App dans mon projet TypeScript, elle devrait être visible au navigateur avec le même nom, donc je pourrais faire var x = new App() dans ma console de développement. (Ou un utilisateur peut le faire dans son fichier JS qu'il injecte après avoir injecté mon fichier SDK). Cette réponse indique simplement comment créer un fichier de sortie dans SystemJS.

Answer 1

Pour cela, vous pouvez utiliser webpack, c'est un utilitaire Node.JS qui tente de regrouper des modules de type Node.JS. Webpack n'exporte pas automatiquement les modules vers l'objet global, mais génère (ou tente de générer) une fonction qui remplace le require par défaut de Node.JS, qui est utilisé pour exécuter le module d'entrée et d'autres, vous pouvez donc modifier cette fonction pour exporter chaque module (ou les propriétés de chaque module) dans l'objet global.

(dactylographiée, utilisez le module CommonJS. En second lieu, installer et utiliser le plug-in ts-chargeur entre avec webpack, vous aurez donc directement compilez tapuscrit de webpack.)

Peut-être cela vaut pour Webpack 2. Par exemple, vous modifiez la fonction __webpack_require__. Il n'est pas dans l'objet global et donc vous devez intervenir dans le code source généré du webpack, à function __webpack_require__:

function __webpack_require__(moduleId) { 
    // [...] (After the `if (installedModules...) ...`) 
    /* 
    * You don't have access to the module name, so export each 
    * property to the browser's global object. 
    */ 
    var exports = module.exports; 
    for (var key in exports) 
     window[key] = exports[key]; 
}