微信小程序转换器之 loader设计实现

小程序开发教程栏目介绍loader设计实现。

配置文件中的loader配置

可以根据配置文件匹配到到规则，去执行相应的loader。

// analyze.config.js // 引入loader const jsLoader = require('./lib/jsLoader') const jsonLoader = require('./lib/jsonLoader') const cssLoader = require('./lib/cssLoader') const htmlLoader = require('./lib/htmlLoader') const signLoader = require('./lib/signLoader') const config = {     entry: './',     output: {         name: 'dist',         src: './'     },     module: [         {             test: /\.js$/,             loader: [signLoader, jsLoader],         },         {             test: /\.wxss$/,             loader: [cssLoader],             outputPath: (outputPath) => outputPath.replace('.wxss', '.acss')         },         {             test: /\.wxml$/,             loader: [htmlLoader],             outputPath: (outputPath) => outputPath.replace('.wxml', '.axml')         },         {             test: /\.json$/,             loader: [jsonLoader],         },     ] } module.exports = config

具体loader实现以jsLoader为例子，接收源码作为参数，返回编译后获得的新的源码

// 前几篇中封装的js转换器 const JsParser = require('./JsParser') function loader(source) {          const jsParser = new JsParser()     let ast = jsParser.parse(source)     ast = jsParser.astConverter(ast)     return jsParser.astToCode(ast) } module.exports = loader

不同文件选择对应loader

// 重写Analyze函数中的analyzeFileToLoard文件分析部分 function Analyze(filePath, outputPath){     if (fs.statSync(filePath).isDirectory()) {         const files = fs.readdirSync(filePath)         files.forEach(file => {             const currentFilePath = filePath+'/'+file             const currentOutputPath = outputPath+'/'+file             if(fs.statSync(currentFilePath).isDirectory()) {                 fs.mkdirSync(currentOutputPath)                 Analyze(currentFilePath, currentOutputPath)             } else analyzeFileToLoard(currentFilePath, currentOutputPath)         })     } else analyzeFileToLoard(filePath, outputPath) }

function analyzeFileToLoard(inputPath, outputPath) {     let source = readFile(inputPath) // 读取源码     const loaders = config.module     loaders.forEach(loader => { // 遍历配置文件，看是否有匹配文件的loader规则         if (loader.test.test(inputPath)) {             // 使用loader             source = useLoader(source, loader.loader, outputPath)             // 输出路径处理函数             if (loader.outputPath) outputPath = loader.outputPath(outputPath)         }     })     writeFile(outputAppPath(outputPath), source) // 将处理过后的源码写入文件 }

loader过滤和执行

function useLoader(source, loaders = []) {     // 执行loader存储列表     const loaderList = []     // 递归去筛选需要执行的loader     function loaderFilter(loaders) {         const [firstLoader, ...ortherLoader] = loaders         if (loaders.length === 0) return         // 执行pitch，并将剩余的loader传入作为参数         if (firstLoader.pitch && firstLoader.pitch(ortherLoader)) return ortherLoader         else {             // 将可用loader加入待执行列表             loaderList.push(firstLoader)             // 剩余loader作为参数 递归调用             loaderFilter(ortherLoader)         }     }     // 大概，暂时用不到。。。     const remainLoader = loaderFilter(loaders)     // 同步loader逆序执行     function runLoader(source, loaderList) {         const loader = loaderList.pop()         let newSource = loader(source)         if (loaderList.length > 0) return runLoader(newSource, loaderList)         else return newSource     }     source = runLoader(source, loaderList)     return source }

实验写个signLoader，看看loader能不能像我们想的那样逆序执行

function loader(source) { let sign = `/** * @Author： LY */ `     source = sign + source     return source } module.exports = loader

结果：

这样简易的loader部分算是完成了，但这么写只能执行一些同步的loader，异步的loader无法等待执行完成后再写入。

相关学习推荐：小程序开发教程

以上就是微信小程序转换器之 loader设计实现的详细内容，更多内容请关注技术你好其它相关文章！