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

Next.js is having trouble identifying the module '@types/react'

Dealing with undefined arrays in Angular across multiple templates: Best practices

What is the best way to iterate over JSON data from an endpoint that contains multiple nested arrays using the .map() method?

What are some strategies for circumventing the need for two switches?

Is your pure function component not receiving or responding to input props correctly?

Learn How to Implement Styling in Material UI using Styled Components

Typescript requires that the argument passed is undefined

Retrieve a mapping of keys from a generic object structure in TypeScript

Update name of an angular 2 component template

Unable to download tsc through the Terminal on OS X

Guide on Applying a Dynamic Color in VueJs 3 Composition API/Vuetify Using CSS

Don't initialize each variable within the constructor of a class, find a more efficient approach

What specific type should be used for validations when incorporating express-validator imperative validations?

Maintaining scroll position in React Router v6

The FirebaseX Ionic native plugin received 2 arguments instead of the expected 3-4

Building a TypeScript Rest API with efficient routing, controllers, and classes for seamless management

Tips for fixing the TS2345 compilation error when working with React

What could be causing these Typescript compilation errors I am experiencing?

Encountering an unanticipated DOMException after transitioning to Angular 13

When utilizing Typescript to develop a form, it is essential to ensure that the operand of a 'delete' operator is optional, as indicated by error code ts(279