快应用编译前如何统一替换字符串

假设你有一个需求,要把代码里的ad-button替换为div,因为是mi看ad-button不爽。

这还不简单么,webpack有那么多成熟的plugins和loaders,本身我对webpack也只是略知一二,随便一搜网上的解决方案,

string-replace-loader

string-replace-webpack-plugin

自定义loader:replace-str-loader

自定义plugin

把能搜到的方案都试了一遍,发现竟无一种方法可行。由于没有系统的学过webpack,也没有从头到尾把枯燥的webpack文档从头到尾翻一遍的觉悟。这种状态持续了一周,我发现不行,这样下去我根本不可能找到解决方案,因为好像没有别人有过在快应用webpack统一替换字符串的需求,所以不可能搜到对应的解决办法,我必须得再深入些,我坚定了一个想法:突破口一定是loader

通过自定义plugin,我发现快应用打包里有2个步骤

const myPlugin = 'myPlugin'module.exports = class MyPlugin {apply(compiler) {compiler.hooks.compilation.tap(myPlugin, (compilation) => {console.log(compilation.options.module.rules);})}
}

执行npm run build后得出以下打印

[{test: /\.js$/,use: ['D:\\code\\quick\\qbb\\node_modules\\@hap-toolkit\\packager\\lib\\loader\\module-loader.js',[Object]]},{test: /\.(ux|mix)$/,use: {loader: 'D:\\code\\quick\\qbb\\node_modules\\@hap-toolkit\\dsl-xvm\\lib\\loader\\ux-loader.js'}}
]

一个是对代码中js的解析,一个是对快应用页面的解析,mix大概是mixins的简写,项目没用到先不管。而ad-button想要替换为div,那肯定是对ux的解析下手,要么在ux-loader前解析,要么在ux-loader处理完之后替换,经测试,必须要在ux-loader之前替换。随后查阅了webpack loader顺序相关的文章,最终实现如下

loader/index.js(自定义loader)

module.exports = function (source) {// 获取webpack配置项loader的optionsconst options = this.query;// source是每个页面ux文件的源码const result = source.replace(/ad-button/g, options.name);return result;
}

quickapp.config.js(快应用这可被webpack识别的配置文件),插件代码只是定位问题用的,删掉也不影响代码执行

const myPlugin = require('./plugin/myPlugin')module.exports = {plugins: [new myPlugin()],module: {rules: [{test: /\.ux$/,// 设置模式为前置(pre),通过反复测试得出必须要是pre,// 否则loader/index.js中拿到的source是被ux-loader编译过的,找不到需要替换的字符串了enforce: 'pre',use: [{loader: './loaders/index.js',options: {name: 'div'}},]}]}
}

代码结构目录如下

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/17311.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

发点实用的快捷键(mac

切换输入法:ctrlspace /ctrloptionspace(更快捷 切换网页: shifttab 切换应用界面:alttab 关闭页面:altw 搜索:altspace 展示mac隐藏文件: Commangshift . (点) 以下是一些浏览器快捷键&am…

Windows磁盘清理

针对开发同学,磁盘不够用时,常见的需要清理的内容: 1、虚拟机镜像、Docker镜像等。 通常占用比较大的存储,一个实例从几个G到几十个G。 2、Maven本地仓库。 如果公司有私服,可以全部删掉重新依赖,否则不…

Spring优雅的在事务提交/回滚前后插入业务逻辑

业务背景 业务那边想要统计下我们这边每天注册商户成功和失败的数量,你看看怎么给他弄下这个功能 功能实现 TransactionSynchronizationManager.registerSynchronization,发现这是spring事务提供的注册回调接口的方法。 在事务注解方法中&#xff0c…

【嵌入式学习笔记】嵌入式入门1——GPIO

1.什么是GPIO General Purpose Input Output,即通用输入输出端口,简称GPIO,作用是负责采集外部器件的信息或者控制外部器件工作,即输入输出。 2.STM32 GPIO简介 2.1.GPIO特点 不同型号,IO口数量可能不一样&#x…

融合大数据、物联网和人工智能的智慧校园云平台源码 智慧学校源码

电子班牌系统用以展示各个班级的考勤信息、授课信息、精品课程、德育宣传、班级荣誉、校园电视台、考场信息、校园通知、班级风采,是智慧校园和智慧教室的对外呈现窗口,也是学校校园文化宣传和各种信息展示的重要载体。将大数据、物联网和人工智能等新兴…

1.2 eureka注册中心,完成服务注册

目录 环境搭建 搭建eureka服务 导入eureka服务端依赖 编写启动类,添加EnableEurekaServer注解 编写eureka配置文件 启动服务,访问eureka Euraka服务注册 创建了两个子模块 在模块里导入rureka客户端依赖 编写eureka配置文件 添加Services 环境搭建 创建父…

Python批量将Excel内指定列的数据向上移动一行

本文介绍基于Python语言,针对一个文件夹下大量的Excel表格文件,对其中的每一个文件加以操作——将其中指定的若干列的数据部分都向上移动一行,并将所有操作完毕的Excel表格文件中的数据加以合并,生成一个新的Excel文件的方法。 首…

Qt应用开发(基础篇)——布局管理 Layout Management

目录 一、前言 二:相关类 三、水平、垂直、网格和表单布局 四、尺寸策略 一、前言 在实际项目开发中,经常需要使用到布局,让控件自动排列,不仅节省控件还易于管控。Qt布局系统提供了一种简单而强大的方式来自动布局小部件中的…

探究SAM和眼球追踪技术在自动医学图像分割的应用(2023+GazeSAM: What You See is What You Segment)

摘要: 本研究探讨眼动追踪技术与SAM的潜力,以设计一个协同的人机交互系统,自动化医学图像分割。提出了GazeSAM系统,使放射科医生能够在图像诊断过程中通过简单地查看感兴趣的区域来收集分割掩模。该系统跟踪放射科医生的眼球运动…

Acwing.873.欧拉函数

题目 给定n个正整数ai,请你求出每个数的欧拉函数。 输入格式 第一行包含整数n。 接下来n行,每行包含一个正整数ai。 输出格式 输出共n行,每行输出一个正整数an的欧拉函数。 数据范围 1 ≤n ≤100 1≤ai≤2* 109 输入样例: 3 3 6 8输…

企业服务器数据库中了_locked勒索病毒怎么解密,_勒索病毒简介与防护

网络技术的发展也为互联网安全带来了一定威胁,对于企业来说,数据安全是关系整个企业正常运行的基础,保护好计算机免受网络威胁的攻击成为大家的一致目标。不过,近期,我们收到很多企业的求助,企业的服务器数…

如何让python在手机上运行,python在手机上怎么运行

大家好,小编来为大家解答以下问题,python程序如何在手机上运行,如何让python在手机上运行,现在让我们一起来看看吧! 在计算机语言的运用过程中PythonS60手机是经常被使用的计算机语言,以下的文章是介绍Pyth…

流控平台Sentinel搭建和接入教程

流量控制和限流是大型系统必不可少的组成部分,Sentinel是Alibaba提供的一款特别好用的专业工具,属于那种看起来很牛,用起来也很牛的工具,下面记录一下接入的过程。 一,搭建平台 1,下载jar包 地址&#x…

Robot Framweork之UI自动化测试---元素定位的4种方式

在Robot Framweork的UI自动化测试中,元素定位主要有四种,即通过id,name,xpath和CSS定位。 一、id定位 id就好比一个人身份证,元素在 HTML 页面中的唯一标识符,因此 ID 定位方式是最常用的方式之一&#xf…

C++标识符的作用域与可见性

标识符是一个由程序员定义的名称,为标识区别变量、函数和数据类型等,代表程序的某些元素,变量名就是标识符的一个展现。 作用域讨论的是标识符的有效范围,可见性讨论的是标识符是否可以被引用。在一个函数中声明的变量就只能在这个…

网络安全进阶学习第八课——信息收集

文章目录 一、什么是信息收集?二、信息收集的原则三、信息收集的分类1.主动信息收集2.被动信息收集 四、资产探测1、Whois查询#常用网站: 2、备案信息查询#常用网站: 3、DNS查询#常用网站: 4、子域名收集#常用网站:#常…

C语言实用调试详解

目录 什么是bug? 调试是什么?有多重要? 调试是什么? 调试的基本步骤 Debug和Release的介绍 Windows环境调试介绍 调试环境的准备 学会快捷键 调试的时候查看程序当前信息 查看临时变量的值 查看内存信息 查看调用堆栈 查看汇编信息 查看寄存器信息 一些调试…

控制反转ioc理解,配置说明

先写个例子吧 配置文件&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"h…

CSS 高频按钮样式

CSS 高频按钮样式 矩形与圆角按钮 正常而言&#xff0c;我们遇到的按钮就这两种 -- 矩形和圆角&#xff1a; 它们非常的简单&#xff0c;宽高和圆角和背景色。 <div classbtn rect>rect</div><div classbtn circle>circle</div>.btn {margin: 8px aut…

【Linux命令200例】rm用来删除文件或目录(谨慎使用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜…