TypeScript требует зависимостей после gulp-concat

У меня есть простой проект TypeScript, состоящий из двух файлов:

helloworld.ts

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

и main.ts

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

Я использую gulp для сборки проекта с gulp-typescript в качестве компилятора TypeScript. Все работает нормально, так как я решил объединить оба скомпилированных файла в один с помощью gulp-concat. Это моя задача сборки:

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));
});

Процесс сборки завершается без ошибок, но когда я запускаю программу с node main.js, вот что я получаю:

Error: Cannot find module './helloworld'

На самом деле скомпилированный .js пытается разрешить зависимость, которая после gulp-concat находится в том же файле:

"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();

Как я могу сказать gulp, что все классы, которые я импортирую в исходный код, должны быть в одном файле сборки? Должен ли я использовать любой другой плагин gulp? Или просто нужно правильно настроить компилятор TypeScript?

alesmit 29.09.2016 источник

comment

Какой у тебя paths.tscripts.src? - Pontiacks 30.09.2016

comment

Я не вставлял весь gulpfile.js, paths.tscripts.src это массив путей, содержащих исходный файл *.ts, paths.tscripts.dest это каталог, в котором находится сборка. - alesmit 30.09.2016

comment

Я еще раз спрошу, какой у вас paths.tscripts.src? Пожалуйста, вставьте его - Pontiacks 30.09.2016

comment

Извините, я не понял. Я обновил вопрос. - alesmit 30.09.2016

Ответы (1)

arrow_upward
0
arrow_downward

Чтобы исправить это, вы можете прекратить использовать exports.HelloWorld с require("./helloworld") и начать использовать gulp, gulp-concat, gulp-typescript с /// <reference path= включает:

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;
}

источник/main.ts

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

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

Эта задача main gulp (на gulpfile.js) нацелена только на файл src/main.js, разрешая все его ссылки /// <reference path=... include. Эти включения известны как Triple-Slash Directives и используются только для инструментов транспилеров для объединения файлов. В нашем случае они явно используются .pipe(resolveDependencies({ и самим typescript при проверке файла на наличие отсутствующих типов, переменных и т.д.

См. https://github.com/ivogabe/gulp-typescript#api-overview, если вы хотите настроить вызов var tsProject = ts.createProject, а не использовать файл tsconfig.json или переопределить его параметры.

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/"));
});

Если вы хотите настроить таргетинг на все файлы вашего проекта type script, а не только на src/main.ts, вы можете заменить это:

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

Если вы не хотите использовать typescript, вы можете использовать этот упрощенный gulpfile.js и удалить все включения typescript из 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"
  }
}

Затем, после выполнения команды npm run gulp, создается файл build/main.js со следующим содержимым:

сборка/main.js

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

Что позволяет мне включить его в браузере с тегом script после обслуживания файлов каталога build:

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

Связанные вопросы:

user 20.04.2020

TypeScript требует зависимостей после gulp-concat

Ответы (1)

Вопросы по теме