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

背景

当我们使用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
    });
});

写在最后

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

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

相关推荐
YAY_tyy5 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
慌糖7 小时前
自动化接口框架搭建分享-pytest第二部分
运维·自动化·pytest
初学者_xuan8 小时前
零基础新手小白快速了解掌握服务集群与自动化运维(七)Nginx模块--Nginx反向代理与缓存功能(二)
运维·nginx·自动化
是店小二呀11 小时前
整合亮数据Bright Data与Dify构建自动化分析系统
大数据·自动化·dify·mcp·bright data
qq_5260991314 小时前
是什么让边缘电脑真正工业化?
嵌入式硬件·自动化
小麦矩阵系统永久免费15 小时前
自动化运营|矩阵系统省心高效
运维·矩阵·自动化
红尘客栈216 小时前
Ansible 入门到实战:自动化运维的瑞士军刀
运维·自动化·ansible
捷米研发三部19 小时前
DeviceNet转ProfiNet协议转换网关实现西门子PLC与丹佛斯变频器通讯的配置案例
网络·物联网·自动化
鼓掌MVP1 天前
Lighthouse安全组自动化审计与加固:基于MCP协议的智能运维实践
运维·安全·自动化·腾讯轻量云ai创想家
柱子jason1 天前
使用IOT-Tree Server通过MC协议连接三菱Q系列PLC
物联网·自动化·三菱plc·通信