创建 vm-data-loader
date
May 6, 2021
slug
velocity-data-loader
status
Published
tags
Webpack
SSR
summary
本地调试 velocity 模版,使用 webpack 编写 loader 为其注入数据,方便调试
type
Post
原理是使用
velocityjs
将数据传入,重新编译。将编译后的字符串返回给 webpack。具体如下:
const loaderUtils = require('loader-utils')
const path = require('path')
const fs = require('fs')
const Velocity = require('velocityjs')
const { Compile, parse } = Velocity
module.exports = function (content) {
if (this.cacheable) {
this.cacheable()
}
const callback = this.async()
const query = loaderUtils.parseQuery(this.query)
if (typeof query === 'object' && query.dataPath) {
const dataPath = path.resolve(query.dataPath)
this.addDependency(dataPath)
try {
fs.readFile(dataPath, 'utf-8', function (err, text) {
if (err) return callback(err)
try {
const context = JSON.parse(text)
/**
* 创建自定义宏:
* https://github.com/shepherdwind/velocity.js/issues/108
*/
const result = new Compile(parse(content)).render(context, { toJson: JSON.stringify })
callback(null, result)
} catch (err) {
callback(err, new Compile(parse(content)).render({}))
}
})
} catch (err) {
console.error('数据文件路径出错', query.dataPath, '找不到该文件')
}
} else {
callback(null, new Compile(parse(content)).render({}))
}
}
具体使用请参考:
创建 vm-parse-loader