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

【问题标题】：How to use gulp-load-plugins with TypeScript?如何在 TypeScript 中使用 gulp-load-plugins？
【发布时间】：2019-04-29 23:25:15
【问题描述】：

我在 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。

【问题讨论】：

标签： node.js typescript webpack gulp gulp-load-plugins

【解决方案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 库，但是仍然可以像往常一样导入和使用它们。

【讨论】：