所属分类：php教程
程序员必备接口测试调试工具：立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试，同时在线协作，内容实时同步
配置文件中的loader配置
可以根据配置文件匹配到到规则，去执行相应的loader。
微博登录
QQ登录// 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设计实现的详细内容，更多请关注zzsucai.com其它相关文章！
