Question

我在TypeScript中找不到gulp-load-plugins的示例。不幸，我的TypeScript太糟糕了，无法理解，应该从 @ type / gulp-load-plugins 评论。

我尝试过：

import * as _gulpPlugins from 'gulp-load-plugins';
const gulpPlugins: IGulpPlugins = _gulpPlugins();

return gulp.src(sourceFilesGlobSelections)
        .pipe(gulpPlugins.pug())
        // ...

它从Webpack发出4条警告（我不知道75:13-25这样的数字在哪里； .pipe(gulpPlugins.pug())在50行上）：

WARNING in ../node_modules/gulp-load-plugins/index.js 75:13-25
Critical dependency: the request of a dependency is an expression
 @ ./TaskManagers/MarkupPreprocessingHelper.ts

WARNING in ../node_modules/gulp-load-plugins/index.js 81:48-63
Critical dependency: the request of a dependency is an expression
 @ ./TaskManagers/MarkupPreprocessingHelper.ts

WARNING in ../node_modules/gulp-load-plugins/index.js 117:40-55
Critical dependency: the request of a dependency is an expression
 @ ./TaskManagers/MarkupPreprocessingHelper.ts

WARNING in ../node_modules/gulp-load-plugins/index.js 122:51-66
Critical dependency: the request of a dependency is an expression
 @ ./TaskManagers/MarkupPreprocessingHelper.ts

在@types/gulp-load-plugins中被告知：

/**
 * Extend this interface to use Gulp plugins in your gulpfile.js
 */
interface IGulpPlugins {
}

我尝试过：

interface IGulpPlugins {
  pug: () => NodeJS.ReadWriteStream;
}

它也定义了：

declare module 'gulp-load-plugins' {

    interface IOptions {
        // ...
    }

    interface IPluginNameMappings {
        [npmPackageName: string]: string
    }

    /** Loads in any gulp plugins and attaches them to an object, freeing you up from having to manually require each gulp plugin. */
    function gulpLoadPlugins<T extends IGulpPlugins>(options?: IOptions): T;

    // ...
}

似乎我应该使用gulpLoadPlugins而不是接口扩展... 这就是我目前对TypeScirpt的熟练程度所能理解的全部，但还不足以了解如何在TypeScript中使用gulp-load-plugins。

Answer 1

gulp-load-plugins-tests.ts中有一个有效的示例：

import * as gulp from 'gulp';
import gulpConcat = require('gulp-concat');
import gulpLoadPlugins = require('gulp-load-plugins');

interface GulpPlugins extends IGulpPlugins {
    concat: typeof gulpConcat;
}

gulp.task('taskName', () => {
    gulp.src('*.*')
        .pipe(plugins.concat('concatenated.js'))
        .pipe(gulp.dest('output'));
});

关于Critical dependency: the request of a dependency is an expression：对于目标为Node.js（而不是浏览器）的webpack项目，请勿捆绑Node.js依赖项。 webpack-node-externals会告诉webpack不要捆绑Node.js库，但是仍然可以照常导入和使用它们。

如何在TypeScript中使用gulp-load-plugins？

1 个答案: