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编译器?

要解决这个问题，您可以停止使用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本身在检查文件是否缺少类型、变量等时显式地使用它们。

https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html
什么时候需要三重斜杠引用?

如果您想自定义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*references*paths*=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*references*paths*=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>

相关内容

最新更新

热门标签：