TypeScript require dependencies after gulp-concat

Question

I have a simple TypeScript project which is made up of two files:

helloworld.ts

export class HelloWorld {
  static printHelloWorld(): void {
    console.log('Hello World');
  }
}

and main.ts

import { HelloWorld } from "./helloworld";
HelloWorld.printHelloWorld();

I'm using gulp to build the project, with gulp-typescript as TypeScript compiler. Everything works fine since I decide to bundle both compiled files into a single one with gulp-concat. This is my build task:

gulpfile.js

var paths = {
  tscripts: {
    src: ['app/src/**/*.ts'],
    dest: 'app/build'
  }
};

gulp.task('build', function () {
  return gulp
    .src(paths.tscripts.src)
    .pipe(sourcemaps.init())
    .pipe(ts())
    .pipe(concat('main.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.tscripts.dest));
});

The build process ends up with no errors, but when I run the program with node main.js this is what I got:

Error: Cannot find module './helloworld'

In fact the compiled .js tries to resolve a dependency that, after gulp-concat, is in the same file:

"use strict";
var HelloWorld = (function () {
    function HelloWorld() {
    }
    HelloWorld.printHelloWorld = function () {
        console.log('Hello World');
    };
    return HelloWorld;
}());
exports.HelloWorld = HelloWorld;

var helloworld_1 = require("./helloworld");
helloworld_1.HelloWorld.printHelloWorld();

How can I tell gulp that all the classes I'm importing in the source should be in a single file in the build? Should I have to use any other gulp plugin? Or just have to setup correctly the TypeScript compiler?

I didn't paste all of the gulpfile.js, `paths.tscripts.src` It's an array of paths containing the source *.ts, `paths.tscripts.dest` is the directory where the build goes. — alesmit, Sep 30 '16 at 07:20
I'll ask again, what is your `paths.tscripts.src`? Please paste it — Pontiacks, Sep 30 '16 at 13:28

Evandro Coan · Answer 1 · 2020-04-20T19:23:10.493

To fix it, you can stop using exports.HelloWorld with require("./helloworld") and started using gulp, gulp-concat, gulp-typescript with /// <reference path= includes:

packages.json

{
  "scripts": {
    "gulp": "gulp main"
  },
  "dependencies": {
    "@types/gulp": "^4.0.6",
    "@types/gulp-concat",
    "@types/gulp-typescript",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-resolve-dependencies": "^3.0.1",
    "gulp-typescript": "^6.0.0-alpha.1",
    "typescript": "^3.7.3"
  }
}

src/someimport.ts

class SomeClass {
    delay: number;
}

src/main.ts

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

someclass = new SomeClass();
someclass.delay = 1;

This main gulp task (on gulpfile.js) targets only the src/main.js file, resolving all its /// <reference path=... include references. These includes are know as Triple-Slash Directives and they are used only for transpilers tools to combine files. In our case, they are used explicitly by .pipe(resolveDependencies({ and by typescript itself when checking the file for missing types, variables, etc.

Refer to https://github.com/ivogabe/gulp-typescript#api-overview if you would like to customize the var tsProject = ts.createProject call and not use a tsconfig.json file or override its parameters.

gulpfile.js

var gulp = require("gulp");
var concat = require('gulp-concat');
var resolveDependencies = require('gulp-resolve-dependencies');

var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

gulp.task("main", function() {
  return gulp
    .src(["src/main.ts"])
    .pipe(resolveDependencies({
      pattern: /^\s*\/\/\/\s*<\s*reference\s*path\s*=\s*(?:"|')([^'"\n]+)/gm
    }))
    .on('error', function(err) {
        console.log(err.message);
    })
    .pipe(tsProject())
    .pipe(concat('main.js'))
    .pipe(gulp.dest("build/"));
});

If you wold like to target all your type script project files instead of only src/main.ts, you can replace this:

  return gulp
    .src(["src/main.ts"])
    .pipe(resolveDependencies({
    ...
// -->
  return tsProject
    .src()
    .pipe(resolveDependencies({
    ...

If you do not want to use typescript, you can use this simplified gulpfile.js and remove all typescript includes from package.json:

gulpfile.js

var gulp = require("gulp");
var concat = require('gulp-concat');
var resolveDependencies = require('gulp-resolve-dependencies');

gulp.task("main", function() {
  return gulp
    .src(["src/main.js"])
    .pipe(resolveDependencies({
      pattern: /^\s*\/\/\/\s*<\s*reference\s*path\s*=\s*(?:"|')([^'"\n]+)/gm
    }))
    .on('error', function(err) {
        console.log(err.message);
    })
    .pipe(concat('main.js'))
    .pipe(gulp.dest("build/"));
});

packages.json

{
  "scripts": {
    "gulp": "gulp main"
  },
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-resolve-dependencies": "^3.0.1"
  }
}

Then, after running the command npm run gulp, the file build/main.js is created with the following as its contents:

build/main.js

class SomeClass {
}
/// <reference path="./someimport.ts" />
someclass = new SomeClass();
someclass.delay = 1;

Which allows me to include it in the browser with the script tag, after serving the build directory files:

<html>
    <head>
        <script src="main.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            console.log(someclass.delay);
        </script>
    </body>
</html>

TypeScript require dependencies after gulp-concat

1 Answers1