Compilation of various Typescript files into a single, encapsulated JavaScript bundle

Question

Compilation of various Typescript files into a single, encapsulated JavaScript bundle

After researching countless similar inquiries on this topic, I have come to the realization that most of the answers available are outdated or rely on discontinued NPM packages. Additionally, many solutions are based on packages with unresolved bug reports dating back two years.

Despite the challenges, I am willing to explore any task runner, package, or import format to achieve my goal.

My aim is to write TypeScript code that resembles the following:

File1:

import FileTwoClass from "./File2"
export default FileOneClass{
    fieldOne:number = 12

    doStuff(){
        FileTwoClass.importantFunction(this.fieldOne)
    }
}

File: App.ts:

import FileOneClass from "./File1" 
class App{
    run(){
        FileOneClass.doStuff();
    }
}

let app = new App()
app.run();

Ultimately, I am seeking a solution that will consolidate all dependencies from linked TypeScript files into a single file.

Is my approach flawed, or is this objective achievable? If so, what is the best way to accomplish it? :D

Thank you!

typescript webpack gulp gruntjs

Answer 1

Answer №1

After some trial and error, I finally cracked it. In case someone else stumbles upon this, you can follow the instructions outlined in this helpful guide: https://www.typescriptlang.org/docs/handbook/gulp.html

Make sure to replace the es2015 preset with "@babel/preset-env": "^7.3.1", as mentioned in the guide.

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var tsify = require('tsify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');

gulp.task('default', function () {
    return browserify({
        basedir: '.',
        debug: true,
        entries: ['ts/app.ts'],
        cache: {},
        packageCache: {}
    })
        .plugin(tsify)
        .transform('babelify', {
            presets: ['@babel/preset-env'],
            extensions: ['.ts']
        })
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist'));
});

Answer 2

After some trial and error, I finally cracked it. In case someone else stumbles upon this, you can follow the instructions outlined in this helpful guide: https://www.typescriptlang.org/docs/handbook/gulp.html

Make sure to replace the es2015 preset with "@babel/preset-env": "^7.3.1", as mentioned in the guide.

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var tsify = require('tsify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');

gulp.task('default', function () {
    return browserify({
        basedir: '.',
        debug: true,
        entries: ['ts/app.ts'],
        cache: {},
        packageCache: {}
    })
        .plugin(tsify)
        .transform('babelify', {
            presets: ['@babel/preset-env'],
            extensions: ['.ts']
        })
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist'));
});

Compilation of various Typescript files into a single, encapsulated JavaScript bundle

Answer №1

Similar questions

Passing a callback to a third-party library resulted in an unexpected error

Combining React Context and Typescript using a Custom Hook

Issue with custom HTML5 video progress bar not syncing with video playback

Exploring the process of importing and exporting modules in TypeScript with the help of systemjs

Setting up a global CSS and SASS stylesheet for webpack, TypeScript, Phaser, and Angular: A step-by-step guide

Using the `window` object in Jasmine with Angular, a mock can be created for testing purposes

Typescript Server Problem: Critical Error - Mark-compacts Inefficiently Close to Heap Limit, Allocation Unsuccessful - JavaScript Heap Exhausted

What is the reason for the lack of functionality of the "unique" field when creating a schema?

How can I properly include DefinitelyTyped TypeScript definition files in a .NET Core project?

RxJS emits an array of strings with a one second interval between each emission

What is the best way to simulate an overloaded method in jest?

Distinguishing between TypeScript versions 2.0.x and 2.1.x using type definitions and filtering with a switch/case statement

What is the best way to implement type discrimination in TypeScript?

What could be causing input to be blocked in certain situations while using my Angular directive with compile function?

Comparison between the version of a particular dependency and the version of its dependent dependency

What causes a curly bracket '{' to be recognized as an unexpected token during react import?

Steps for importing a CommonJS module that exports as a callable into TypeScript

Verify the accuracy of each object in an array by comparing it to an enum and confirming its validity

In Typescript, a computed property name within a type literal must be associated with an expression that has a type of literal or a 'unique symbol' type.ts(1170)

Having trouble with an unexpected value in your Angular2 Service? Don't forget to add