在vue或者css或者less文件中插入nodejs代码

在vue或者css或者less文件中插入nodejs代码

背景

在一些需要读取本地文件或者目录，或者其他模块的时候，以浏览器未宿主的js无法实现，

如我有一个功能介绍轮播图的功能，图片是存储在src中某个目录中，此时传统写法有些受限，如require不支持通配符等，虽然一些node库可以让其支持通配符，但不够动态。

想要的效果

// 改造前
new Vue({
    data(){
        return {
            imgList:[require('/img/1.png'),require('@/assets/img/2.png')]
        }   
    }   
});
// 改造后
new Vue({
    data(){
        return {
            imgList:[/*NODE_JS_START require('fs').readdirSync(require('path').resolve('src/assets/img')).map(a=>'require("@/assets/img/'+a+'")').join(',') NODE_JS_END*/]
        }   
    }   
});

实现思路（loader）

写一个自定义load，如果你是在vue中嵌入nodeJs,则新建一个vue的loader，其他的如css或者less嵌入形势和vue类同

loader 中加入一个自定义项

    {
        test:/\.vue$/,
        use:[{
            loader:path.join(__dirname,'./extLoader.js')
        }]
    }

新建一个loader的处理文件，extLoader.js

module.exports = function (content) {
    //穿插node语句方案  可根据自身需要，输出不同的结果，是否支持多行等 
    const nodeCodeReg = /\/\*NODE_JS_START\s(.*?)\sNODE_JS_END\*\//g;
    if(nodeCodeReg.test(content)){
        content = content.replace(nodeCodeReg,($,code)=>{
            return new Function('require',`return ${code}`)(require);
        });
    }
    return content;
};

小功告成

优点：实现功能，减少人工书写代码量

缺点：可读性差，好像又回去了html和后端代码混写的时代。

思路扩展

1. 条件编译plus版（扩展到less，css及其他自定义文件类型中）
2. 动态生成原生代码
3. 复用（动态引入，实现类似c的 #include "App.vue[template]"）
4. …

从loader的角度可以解决不少需要预处理的问题，从plugin的角度可以解决不少运行时的问题。

本文完

结束语：如果遇到了问题，欢迎在评论区交流，如果觉得不错，可以点赞和收藏，持续更新。

1. 博客中标注原创的文章，版权归原作者 苦中作乐才是人生巅峰 所有；
2. 未经原作者允许不得转载本文内容，否则将视为侵权；
3. 转载或者引用本文内容请注明来源及原作者；