Wie kann ich mein Typescript in eine einzige JS-Datei ohne Modulladesystem kompilieren?

Question

Ich habe ein kleines Typoskript-Projekt von etwa 10 ts Dateien. Ich möchte alle meine Dateien in es5 und in eine einzige es5 Datei namens all.js kompilieren.

Derzeit mit meinem tsconfig.json aufgebaut wie

{ 
    "compilerOptions": { 
    "module": "system", 
    "target": "es5", 
    "outFile": "./all.js" 
} 

alles kompiliert bekommen, aber jede Datei von

System.register("SomeTSFile", [], function(exports_4, context_4) { 
... 
} 

SystemJS gewickelt wird sieht cool aus, aber ich bin nicht in der Stimmung zu lernen es jetzt und ich glaube nicht, dass es notwendig ist. Wenn ich alle meine JS in eine Datei bekommen könnte, würde das für meine Bedürfnisse vollkommen ausreichen.

Wenn ich "module": "system", aus meinen Compiler-Optionen entferne, kommt meine all.js Datei vollständig leer. Offensichtlich ist dies, weil aus irgendeinem Grund, you cannot use "modules": none when outputting to one file. (Ich verstehe nicht, warum)

Wie kann ich alle TS in eine JS-Datei kompilieren, ohne SystemJS oder andere Komplikationen einbeziehen zu müssen?

Answer 1

Können Sie den Compiler selbst verwenden? - als Post-Build-Prozess. TSC akzeptiert Argumente, die Ihnen erlauben, dies zu tun.

tsc --out compiledSingleFile.js one.ts two.ts

Oder von Gulp in Ihrer Build-Pipeline -

https://www.npmjs.com/package/gulp-tsc

Answer 2

Der Inhalt Ihrer .ts Dateien bestimmt, ob dies möglich ist oder nicht ...

Wenn Sie vermeiden Wenn Sie Ihren TypeScript-Code zu einem Modul machen (indem Sie import oder export Deklarationen vermeiden), enthält die Ausgabe der Kompilierung mit einer einzigen Datei kein d Abhängigkeit von einem Modullader.

Zum Beispiel: typescript compiler itself wird ohne eine Top-Level-Import-oder Export-Deklarationen geschrieben und kompiliert so in eine einzige Datei .js ohne Loader-Abhängigkeit.

Beachten Sie, dass die Verwendung von export in einem Namespace kein "Top Level" -Export ist. Die Einfuhren innerhalb eines Namensraumes sind möglich, aber stark eingeschränkt: an example here

„In Typoskript, wie in ECMAScript 2015 jede Datei einen Top-Level-Import oder Export enthält, wird ein Modul betrachtet."

The typescript handbook

Answer 3

Hier ist die Methode, die ich am Ende mit:

1. installieren Rollup und Plugins (viele Plugins hier aufgelistet sind optional, aber diese Konfiguration sollte jede mögliche Weise abdecken, in denen Sie Module verwenden)

npm install rollup-plugin-buble rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-typescript rollup-plugin-uglify typescript --save-dev

---

2. Dieses Beispiel Rollup-Konfigurationsdatei zeigt, wie Rollup zu verhindern, dass auch Ihre Abhängigkeiten zu bündeln:

rollup.config.js

'use strict'; 

import 'rollup'; 
import typescript from 'rollup-plugin-typescript'; 
import buble from 'rollup-plugin-buble'; 
import commonjs from 'rollup-plugin-commonjs'; 
import nodeResolve from 'rollup-plugin-node-resolve'; 
import uglify from 'rollup-plugin-uglify'; 
import {minify} from 'uglify-js'; 

/** 
* Default/development Build 
*/ 
const config = { 
    entry: 'src/index.ts', 
    exports: 'auto', 
    globals: { 
     'jquery': '$', 
     'angular': 'angular' 
    }, 
    external: ['angular', 'jquery'], 
    targets: [{dest: 'dist/myModuleName.js', format: 'umd', moduleName: 'myModuleName', sourceMap: true}], 
    plugins: [ 

     typescript({ 
      typescript: require('typescript') 
     }), 
     buble(), 
     nodeResolve({ 
      jsnext: true, 
      main: true 
     }), 
     commonjs({ 
      namedExports: { 
       'node_modules/jquery/dist/jquery.min.js': ['jquery'], 
       'node_modules/angular/angular.min.js': ['angular'] 
      } 
     }) 
    ] 
} 

// Minified JS Build 
if (process.env.BUILD === 'minify') { 
    config.targets = [{dest: 'dist/myModuleName.min.js', format: 'umd', moduleName: 'myModuleName', sourceMap: false}]; 
    config.plugins.push(
     uglify({}, minify) 
    ); 
} 

// Report destination paths on console 
console.info(`\u001b[36m\[Rollup ${process.env.BUILD} build\]\u001b[97m \nConverting Typescript from ${ 
config.entry} to javascript, exporting to: ${config.targets[0].dest}`); 

export default config 

---

3. Fügen Sie Skripte zu package.json
hinzu

"scripts": { "build": "rollup -c rollup.config.js --no-conflict --environment BUILD:development", "minify": "rollup -c rollup.config.js --environment INCLUDE_DEPS,BUILD:minify" }

---

4. eine Datei geben Sie für Rollup zu konsumieren:

src/index.ts

`export * from './myModule';` 

---

5. Verwenden Sie optional eine Datei, um Ihre Module für den Export zu sammeln. Wenn Sie eine Bibliothek schreiben, sind dies die Funktionen, die Sie öffentlich verfügbar machen möchten.

src/myModule.ts

export {myClass} from './myFile'; export {myOtherClass, myFunction} from './myUtils/myFile'; export * from "./myUtils/myOtherFile";

---

6. Lauf npm run build oder npm run build && npm run minify auch die verkleinerte Version.