好资源导航 » 文章资讯 » vue-loader中引入模板预处理器的实现

vue-loader中引入模板预处理器的实现

2023-08-15 07:27:04 55

vue-loader是一个webpack的loader，可以将指定格式编写的Vue组件转换为JavaScript模块

同时，vue-loader支持使用非默认语言，通过设置语言块的lang属性，就可以使用指定的预处理器，比如最常见的sass语法：

...

这里重点讨论使用不同的js模板引擎作为预处理器，

下面示例使用了pug模板引擎


div
h1Helloworld!

1.支持哪些模板引擎

v14或更低版本使用consolidate来编译,所以支持的模板引擎，从consolidate的支持列表中可以找到，包括了大部分引擎，

在vue-loader/preprocessor.js文件里面，

//loaderforpre-processingtemplateswithe.g.pug
constcons=require('consolidate')
constloaderUtils=require('loader-utils')
const{loadOptions}=require('../utils/options-cache')

module.exports=function(content){
constcallback=this.async()
constopt=loaderUtils.getOptions(this)||{}

if(!cons[opt.engine]){
returncallback(
newError(
"Templateengine'"+
opt.engine+
"'"+
"isn'tavailableinConsolidate.js"
)
)
}

//allowpassingoptionstothetemplatepreprocessorvia`template`option
constvueOptions=loadOptions(opt.optionsId)
if(vueOptions.template){
Object.assign(opt,vueOptions.template)
}

//forrelativeincludes
opt.filename=this.resourcePath

cons[opt.engine].render(content,opt,(err,html)=>{
if(err){
returncallback(err)
}
callback(null,html)
})
}

可以看到，使用consolidate进行预处理。

v15及以上版本，允许对vue组件中的每个部分使用其他的webpackloader，可以正常使用各种模板引擎。

使用@vue/component-compiler-utils工具编译模板，实际在component-compiler-utils中编译template时，也把consolidate作为预处理器，使用consolidate.render编译成字符串。

2.引入pug

需安装pug-plain-loader，利用它返回一个编译好的HTML字符串，

vue-loader中引入模板预处理器的实现

热门推荐

随机推荐