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

背景

当我们使用gulp自动化处理文件的时候,难免会遇到需要按照一定条件过滤的需求,这里博主所遇到问题是,通过文件内容中是否包含 某一串字符串 决定过滤当前的文件

比如:

碰到文件中包含注释 * @replace-note 此文件未被引用 ,那么,gulp任务就忽略该文件,继续处理下一个文件。

typescript 复制代码
/**
 * @replace-note 此文件未被引用
 */

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

依赖

  • gulp-filter // 最新版本

引入方式

  1. 之前的版本 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' }

  2. 这里报错提示我们采用动态 import()方式引入,异步获取依赖的内容

typescript 复制代码
import("gulp-filter").then(module => {
 // module.default
});

使用

过滤的方式有很多种gulp-filter可以深度去学习各种各样的用法,可以解决我们所想要的过滤功能;

一些普通的用法,大家看这里有案例

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

typescript 复制代码
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
    });
});

写在最后

挺感谢前辈们创造的一个又一个的工具,给我们开发中带来了各种各样的便利,大佬们已经提供了各种各样的工具,只不过怎么正确使用,是我们工作中需要思考的事情,合理使用让我们的工作事半功倍。

话不多说,觉得博主帮到了大家,记得点个赞 再走呗,抱拳🙏!!!

相关推荐
工头阿乐7 小时前
Appium自动化开发环境搭建
运维·appium·自动化
夸克App19 小时前
实现营销投放全流程自动化 超级汇川推出信息流智能投放产品“AI智投“
运维·人工智能·自动化
Rainbond云原生19 小时前
83k Star!n8n 让 AI 驱动的工作流自动化触手可及
运维·人工智能·自动化
YONG823_API20 小时前
深度探究获取淘宝商品数据的途径|API接口|批量自动化采集商品数据
java·前端·自动化
木觞清20 小时前
深度对比评测:n8n vs Coze(扣子) vs Dify - 自动化工作流工具全解析
运维·自动化
电商数据girl20 小时前
产品经理对于电商接口的梳理||电商接口文档梳理与接入
大数据·数据库·python·自动化·产品经理
老狼孩111221 天前
2025新版懒人精灵零基础及各板块核心系统视频教程-全分辨率免ROOT自动化开发
android·机器人·自动化·lua·脚本开发·懒人精灵·免root开发
Yang_yangyang1 天前
mysql定时备份、打包、传输
数据库·mysql·自动化
哈哈幸运1 天前
Linux Awk 深度解析:10个生产级自动化与云原生场景
linux·云原生·自动化·awk·三剑客
b***25111 天前
自动点焊机批发:工业制造的高效之选
物联网·自动化·制造