小程序开发教程栏目介绍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过滤和执行
weenCompany闻名企业网站系统5.3.0 中英文 GB2312
下载
weenCompany闻名企业网站系统(免费开源)是一个功能强大, 使用简单的中英文企业智能建站系统, 您只需要一些基本的计算机知识就可以利用此系统完成中小型企业网站的建设; 是低成本企业网站架设方案之首选CMS系统, 也适合建设个人网站。weenCompany闻名企业网站系统功能：1. 程序代码简洁严谨, 整个系统程序仅2M左右大小.2. 中英文双语版共用一套网站程序, 双语页面实现自由切换.3
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无法等待执行完成后再写入。
相关学习推荐：小程序开发教程
