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

假设你有一个需求,要把代码里的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的options
    const 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'
                        }
                    },
                ]
            }
        ]
    }
}

代码结构目录如下

相关推荐
gnip10 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel10 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休11 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪11 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do11 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选11 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选11 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼11 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——11 小时前
前端登录鉴权详解
前端·javascript
李姆斯12 小时前
复盘上瘾症:到底什么时候该“复盘”,什么时候不需要“复盘”
前端·后端·团队管理