TypeScript 在 gulp-concat 之后需要依赖项答案

【问题标题】：TypeScript require dependencies after gulp-concatTypeScript 在 gulp-concat 之后需要依赖项
【发布时间】：2017-02-08 02:06:15
【问题描述】：

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

【问题讨论】：

你的paths.tscripts.src是什么？
我没有粘贴所有的 gulpfile.js，paths.tscripts.src 是一个包含源 *.ts 的路径数组，paths.tscripts.dest 是构建所在的目录。
我再问一遍，你的paths.tscripts.src是什么？请粘贴
对不起，我没听懂。我更新了问题。

标签： typescript gulp gulp-concat gulp-typescript

【解决方案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({ 和 typescript 本身在检查文件是否缺少类型、变量等时明确使用它们。

如果您想自定义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 并从package.json 中删除所有typescript 包含：

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;

这允许我在提供build 目录文件之后，将其包含在带有script 标记的浏览器中：

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