一些引入依赖，提示引入方式报错的问题

news2025/1/9 19:44:32

在这里插入图片描述

背景

当我们使用gulp自动化处理文件的时候，难免会遇到需要按照一定条件过滤的需求，这里博主所遇到问题是，通过文件内容中是否包含某一串字符串决定过滤当前的文件
比如：
碰到文件中包含注释 * @replace-note 此文件未被引用 ,那么，gulp任务就忽略该文件，继续处理下一个文件。

/**
 * @replace-note 此文件未被引用
 */

庆幸的是，已经有前辈创造了 gulp-filter这种插件，专门用来处理自动化过程当中，碰到需要过滤某些文件时的良药

依赖

gulp-filter // 最新版本

引入方式

之前的版本 require('gulp-filter')的方式

报错：
Error [ERR_REQUIRE_ESM]: require() of ES Module xxx/node_modules/gulp-filter/index.js from xxx/gulpfile.js not supported. Instead change the require of index.js in xxx/gulpfile.js to a dynamic import() which is available in all CommonJS modules. at Object.<anonymous> (xxx/gulpfile.js:12:16) at async Promise.all (index 0) { code: 'ERR_REQUIRE_ESM' }
这里报错提示我们采用动态 import()方式引入，异步获取依赖的内容

import("gulp-filter").then(module => {
 // module.default
});

使用

过滤的方式有很多种，gulp-filter可以深度去学习各种各样的用法，可以解决我们所想要的过滤功能；
一些普通的用法，大家看这里有案例

下面这种属于自定义过滤方式，当然也就会五花八门啦，主要是提供一个回调函数，该函数由使用者自己去实现什么情况下，需要过滤掉某些文件

const gulp = require("gulp");
const replace = require("gulp-replace");
const XLSX = require("xlsx");

// 动态引入 gulp-filter
const dynamicImport = () => {
  return new Promise(resolve => {
    import("gulp-filter").then(module => {
      resolve(module.default);
    });
  });
};

// 过滤存在此注释的文件
const filter_file_mark = "* @replace-note 此文件未被引用";

gulp.task("search-replace", async () => {
  const keyMap = getKeywordMap();
  const filter = await dynamicImport();
  let filterRule = filter(function (file) {
    // 过滤存在此注释的文件
    return !file.contents.toString().includes(filter_file_mark);
  });

  return gulp
    .src(["./src/**/*.js", "./src/**/*.jsx"])
    .pipe(filterRule)
    ...其他的一些处理
    .on("end", function () {
      // xxx
    });
});