微信小程序转换器之loader的实现方法
这篇文章主要介绍了微信小程序转换器之loader的实现方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联致力于互联网品牌建设与网络营销,包括做网站、网站建设、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。创新互联为不同类型的客户提供良好的互联网应用定制及解决方案,创新互联核心团队10余年专注互联网开发,积累了丰富的网站经验,为广大企业客户提供一站式企业网站建设服务,在网站建设行业内树立了良好口碑。
配置文件中的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过滤和执行
loader执行是个逆序的执行,从右边向左依次执行。在这里我们先用同步的loader来做讨论。
loader执行前还有个pitch阶段,感觉pitch这个起名方式并不是特别合适,我更愿意叫它过滤筛选阶段。先去顺序执行loader上的pitch方法,要是pitch有返回值,就不再执行在该loader之前执行的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的实现方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
文章名称:微信小程序转换器之loader的实现方法
网站地址:http://pwwzsj.com/article/pddege.html