How can I compile my Typescript into one JS file without a module loading system?

Question

I have a small Typescript project with about 10 tsfiles. I want to collect all my files in es5and into a single es5file with the name all.js.

Currently mine is tsconfig.jsonconfigured as

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

everything compiles, but each file wraps around

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

SystemJS looks cool, but I am not in the mood to learn it now, and I do not believe that it is necessary. If I could collect all my JS in one file, that would be quite enough for my needs.

"module": "system", all.js . -, , - "modules": none . ( )

TS JS SystemJS - ?

Answer 1

.ts , ...

TypeScript ( import export), .

: typescript - , , .js - .

, export . , :

" TypeScript, ECMAScript 2015, , .

TypeScript

Answer 2

:

• ( , , , )

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

---

2. , :

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. package.json

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

---

4. :

SRC/index.ts

`export * from './myModule';`

---

5. , , , .

SRC/myModule.ts

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

---

6. npm run build npm run build && npm run minify, -.

Answer 3

? - . TSC , .

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

Gulp -

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

Answer 4

typecript (tsc)

.

index.ts:

/// <reference path="./domHelpers.ts" />

function add(a: number, b: number): number {
    return a + b;
}

q('#sum').textContent = add(2, 5).toString();

domHelpers.ts

function q(query: string): Element {
    return document.querySelector(query);
}

function qa(query: string): NodeListOf<Element> {
    return document.querySelectorAll(query);
}

:

tsc --out bundle.js ts/index.ts

bundle.js

function q(query) {
    return document.querySelector(query);
}
function qa(query) {
    return document.querySelectorAll(query);
}
/// <reference path="./domHelpers.ts" />
function add(a, b) {
    return a + b;
}
q("#sum").textContent = add(2, 5).toString();

Answer 5

TypeScript 3.4, *.ts .js.

tsconfig.json, tsc --project src/test/tsconfig.json

{
  "compilerOptions": {
    "outFile": "../../build/test/Code.js",
    "module": "none",
    "skipLibCheck": true,
  },
  "include": ["**/*.ts"],
}