Creating a build task in Visual Studio Code with universal TypeScript compiler settings

Question

Creating a build task in Visual Studio Code with universal TypeScript compiler settings

Our project has the following structure:

+-- views
    +-- viewXXX
        +-- ts
        ¦    +-- controller.ts
        ¦    +-- helper.ts
        ¦    +-- ... (*.ts)
        +-- viewXXX.ctrl.js // this is the desired output file
        +-- viewXXX.ctrl.map.js
        +-- viewXXX.html

We are currently setting up a task in VSCode to compile following this structure...

// Task configuration for calling the Typescript compiler (tsc)
{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": [
        "-t",
        "es5",
        "-m",
        "commonjs",
        "--sourceMap",
        "--out",
        "${fileDirname}.ctrl.js",
        // "--filesGlob", missing
        "${fileDirname}\\ts\\*.ts"
    ],
    "problemMatcher": "$tsc"
}

We're facing difficulties as there is no --filesGlob parameter available, or any other method to use regex to compile multiple files. Are there alternative approaches that support this workflow?

typescript visual-studio-code tsc

Answer 1

Answer №1

Upon thorough investigation, here is a functional solution :

Utilize the provided package.json located at the root of your project directory

{
  "dependencies": {
    "gulp": "^3.9.0",
    "gulp-typescript": "^2.10.0",
    "gulp-sourcemaps": "^1.6.0"
  }
}

npm install
In the .vscode/task.json :

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            // Set this as the default build command.
            "isBuildCommand": true,
            // Display the output window only in case of unrecognized errors.
            "showOutput": "silent"
        }
    ]
}

In the gulpfile.js placed at the root of your project directory :

var gulp = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');

var views = [
  "views/view1",
  "views/view2"  
];

function buildView(viewBasePath) {
    var finalName = viewBasePath.split('/').pop();

    var tsResult = gulp.src(viewBasePath + '/ts/*.ts') 
        .pipe(sourcemaps.init())
        .pipe(ts({
            "module": "commonjs",
            "target": "es5",
            "out": finalName + '.ctrl.js'
        }));

    return tsResult.js
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(viewBasePath));
}

gulp.task('default', function () {
    for(var i = 0; i < views.length; i++) {
        buildView(views[i]);   
    }
});

To initiate build, use CTRL+SHIFT+B or set up a watch in the gulpfile.

Answer 2

Upon thorough investigation, here is a functional solution :

Utilize the provided package.json located at the root of your project directory

{
  "dependencies": {
    "gulp": "^3.9.0",
    "gulp-typescript": "^2.10.0",
    "gulp-sourcemaps": "^1.6.0"
  }
}

npm install
In the .vscode/task.json :

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            // Set this as the default build command.
            "isBuildCommand": true,
            // Display the output window only in case of unrecognized errors.
            "showOutput": "silent"
        }
    ]
}

In the gulpfile.js placed at the root of your project directory :

var gulp = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');

var views = [
  "views/view1",
  "views/view2"  
];

function buildView(viewBasePath) {
    var finalName = viewBasePath.split('/').pop();

    var tsResult = gulp.src(viewBasePath + '/ts/*.ts') 
        .pipe(sourcemaps.init())
        .pipe(ts({
            "module": "commonjs",
            "target": "es5",
            "out": finalName + '.ctrl.js'
        }));

    return tsResult.js
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(viewBasePath));
}

gulp.task('default', function () {
    for(var i = 0; i < views.length; i++) {
        buildView(views[i]);   
    }
});

To initiate build, use CTRL+SHIFT+B or set up a watch in the gulpfile.

Answer 3

Answer №2

To start, begin by establishing a tsconfig.json file in the main directory of your project :

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "inlineSourceMap": false,
    "sourceMap": true,
    "out": "${fileDirname}.ctrl.js"
  },
  "filesGlob": [
    "${fileDirname}\\ts\\*.ts"
  ]
}

Next, specify the location of the tsconfig.json using the "-p" parameter :

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": ["-p", "."],
    "problemMatcher": "$tsc"
}

Lastly, activate the task runner with CTRL+SHIFT+B.

Answer 4

To start, begin by establishing a tsconfig.json file in the main directory of your project :

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "inlineSourceMap": false,
    "sourceMap": true,
    "out": "${fileDirname}.ctrl.js"
  },
  "filesGlob": [
    "${fileDirname}\\ts\\*.ts"
  ]
}

Next, specify the location of the tsconfig.json using the "-p" parameter :

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": ["-p", "."],
    "problemMatcher": "$tsc"
}

Lastly, activate the task runner with CTRL+SHIFT+B.

Creating a build task in Visual Studio Code with universal TypeScript compiler settings

Answer №1

Answer №2

Similar questions

Angular - Electron interface fails to reflect updated model changes

Creating bonds between components in React

Having difficulty constructing a full stack application using Express

Managing asynchronous data using rxjs

Unveiling RxJs: The secret to extracting the notifier value using the takeuntil operator

Storing the typeof result in a variable no longer aids TypeScript in type inference

Next.js API is throwing a TypeError because req.formData is not a recognized function

Retrieving chosen row data in Angular 6 Material Table

When working with Typescript, an error may occur related to index types even though the constant object and its

Angular - handling Observable<T> responses when using Http.post

What causes the form to consistently show as invalid once it has been submitted?

When employing the pipe function within *ngFor, the webpage's refresh may vary, causing occasional updates

Unraveling nested elements with the array map() method in Angular2 and Typescript: Fixing the issue of undefined property reference while mapping

What is the process for modifying object information using string input in typescript?

Getting the Angular component class reference within a triggered Highcharts selection event callback - what's the best approach?

Best practices for transitioning a project from TypeScript 3 to TypeScript 4?

What is the method for obtaining the properties of a type as an array in Typescript?

After running npm install, I noticed that react-router-dom was installed as a separate package in a different package.json file. How can I ensure that it installs in the same

NG0900: Issue encountered while attempting to compare '[object Object]'. Please note that only arrays and iterable objects are permitted for comparison

Explaining the process of defining an object type in TypeScript and the conversion from JavaScript