Question

我有一个简单的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编译器？

Answer 1

要解决此问题，您可以停止将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;
}

src / main.ts

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

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

此main gulp任务（在gulpfile.js上）仅针对src/main.js文件，从而解决了其所有/// <reference path=...包含引用。这些包括称为Triple-Slash Directives，它们仅用于编译器工具来组合文件。在我们的情况下，.pipe(resolveDependencies({和打字稿本身会在检查文件中是否缺少类型，变量等时明确使用它们。

如果您想自定义var tsProject = ts.createProject调用而不使用tsconfig.json文件或覆盖其参数，请参考https://github.com/ivogabe/gulp-typescript#api-overview。

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

如果您希望将所有类型脚本项目文件作为目标，而不仅仅是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，其内容如下：

build / 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>

在gulp-concat

1 个答案: