0
点赞
收藏
分享

微信扫一扫

关于项目使用uni-ui且想把".ui-"、"uni-"前缀换其他或者去掉

暮晨夜雪 03-13 16:30 阅读 3

这么做为了减少代码体积


思路:通过vite的插件,在运行时将前缀进行更换或者去除


.uni-前缀换成其他:

// vite-plugin-change-style-prefix.js 这个文件的位置可以与vite.config.js放在同一目录下
import { createFilter } from 'vite';

export function changeStylePrefix() {
    const filter = createFilter(/\.(vue|svelte|css)$/i, /node_modules/);

    return {
        name: 'change-style-prefix', // 必须的,将会显示在 warning 和 error 中
        transform(code, id) {
            if (filter(id)) {
                // 使用正则表达式匹配并替换带有数据属性的SCSS选择器
                const transformedCode = code.replace(/\.uni-(\w+)/g, (match, p1) => {
                    /* TODO 至于是去除还是替换,可以给这个方法传递一个类参数,条件可以从类参里面拿 */
                    // TODO 更换前缀 多个
                    return `.wei-qi-${p1}`;
                    // TODO 去除前缀 多个类名
                    // return `.${p1}`;
                });
                // console.log('-------------------', transformedCode)
                return {
                    code: transformedCode,
                    map: null // 如果可行将提供 source map
                };
            }
        }
    };
}

去掉class类名中uni-前缀:

// vite-plugin-change-style-prefix.js
// 这个方法为了去除标签中class类名中的uni-前缀
export function replaceClassNames() {
    const filter = createFilter(/\.(vue|js)$/i, /node_modules/);
    return {
        name: 'replace-class-names', // 插件名称
        transform(code, id) {
            // 只对.vue或.js文件进行处理
            // if (id.endsWith('.vue') || id.endsWith('.js')) {
            if (filter(id)) {
                /* TODO 至于是去除还是替换,可以给这个方法传递一个类参数,条件可以从类参里面拿 */
                // TODO 更换前缀 这种只适合class中只有一个uni-开头的类名
                // return code.replace(/class="uni-(.*?)"/g, 'class="wei-qi-$1"');
                // TODO 更换前缀 这种适合class中有多个类名 更换的话只要这种就行
                return code.replace(/class="\s*([^"]*)"/g, (match, classNames) => {
                    // Split the class names and filter out 'uni-' prefix
                    const updatedClassNames = classNames.split(/\s+/).map(className => {
                        return className.startsWith('uni-') ? className.replace(/\buni-(\w+)/g, 'wei-qi-$1') : className;
                    }).join(' ');
                    return `class="${updatedClassNames}"`;
                });
                // TODO 去除前缀 这种只适合class中只有一个uni-开头的类名
                // return code.replace(/class="\s*([^"]*\b)uni-(\w+)(\b[^"]*)"/g, 'class="$1$2$3"');
                // TODO 去除前缀 这种适合class中有多个类名 去除的话只要这种就行
                // return code.replace(/class="\s*([^"]*)"/g, (match, classNames) => {
                //     // Split the class names and filter out 'uni-' prefix
                //     const updatedClassNames = classNames.split(/\s+/).map(className => {
                //         return className.startsWith('uni-') ? className.substring(4) : className;
                //     }).join(' ');
                //     return `class="${updatedClassNames}"`;
                // });
            }
            return code;
        },
    };
}

使用注意:

使用vite创建uniapp时,肯定会安装import uni from "@dcloudio/vite-plugin-uni";

在vite的插件中,会这样用:自定义的插件方法一定得要放在uni()上面,否则会无效的!

return {
      plugins: [
        // 
        changeStylePrefix(),  // 上面自定义的插件方法名
        replaceClassNames(),  // 上面自定义的插件方法名
        uni(),
      ]
    }

因为是运行时处理的,所以在更改完vite配置后,要重新运行


举报

相关推荐

0 条评论