如何在vue-loader中引入模板预处理器
今天就跟大家聊聊有关如何在vue-loader中引入模板预处理器,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
创新互联是一家专业提供荥阳企业网站建设,专注与网站设计、成都网站制作、H5响应式网站、小程序制作等业务。10年已为荥阳众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
vue-loader 是一个 webpack 的 loader,可以将指定格式编写的 Vue 组件转换为 JavaScript模块
同时,vue-loader 支持使用非默认语言,通过设置语言块的lang属性,就可以使用指定的预处理器,比如最常见的sass 语法:
这里重点讨论使用不同的js模板引擎作为预处理器,
下面示例使用了pug模板引擎
div h2 Hello world!
1. 支持哪些模板引擎
v14 或更低版本使用 consolidate 来编译 , 所以支持的模板引擎,从consolidate的支持列表中可以找到,包括了大部分引擎,
在vue-loader/preprocessor.js 文件里面,
// loader for pre-processing templates with e.g. pug const cons = require('consolidate') const loaderUtils = require('loader-utils') const { loadOptions } = require('../utils/options-cache') module.exports = function (content) { const callback = this.async() const opt = loaderUtils.getOptions(this) || {} if (!cons[opt.engine]) { return callback( new Error( "Template engine '" + opt.engine + "' " + "isn't available in Consolidate.js" ) ) } // allow passing options to the template preprocessor via `template` option const vueOptions = loadOptions(opt.optionsId) if (vueOptions.template) { Object.assign(opt, vueOptions.template) } // for relative includes opt.filename = this.resourcePath cons[opt.engine].render(content, opt, (err, html) => { if (err) { return callback(err) } callback(null, html) }) }
可以看到,使用consolidate 进行预处理。
v15 及以上版本,允许对vue组件中的每个部分使用其他的webpack loader,可以正常使用各种模板引擎。
使用@vue/component-compiler-utils 工具编译模板,实际在component-compiler-utils中编译template时,也把consolidate作为预处理器,使用consolidate.render编译成字符串。
2. 引入pug
需安装pug-plain-loader,利用它返回一个编译好的 HTML 字符串,
在最新的vue-cli@3.x 配置中,默认已配置好pug的相关loader, 所以安装完可以直接在中使用,
/* config.module.rule('pug') */ { test: /\.pug$/, oneOf: [ /* config.module.rule('pug').oneOf('pug-vue') */ { resourceQuery: /vue/, use: [ /* config.module.rule('pug').oneOf('pug-vue').use('pug-plain-loader') */ { loader: 'pug-plain-loader' } ] }, /* config.module.rule('pug').oneOf('pug-template') */ { use: [ /* config.module.rule('pug').oneOf('pug-template').use('raw') */ { loader: 'raw-loader' }, /* config.module.rule('pug').oneOf('pug-template').use('pug-plain') */ { loader: 'pug-plain-loader' } ] } ] },
3. 引入dotjs或其他模板引擎,
需在vue.confg.js 里面手动配置loader, 配置规则跟引入pug类似,修改相关loader即可。
还有一点比较特殊,该模板引擎对应的loader, 必须返回字符串,
比如我们使用dotjs-loader,来解析dotjs模板,就会报错,然后查看dotjs-loader,发现
return 'export default ' + doT.template(source);
最后返回导出结果, doT.template(source)执行成功后,返回一个匿名函数,
所以想要返回最终的字符串,只有传入数据,执行函数 doT.template(source)(data)。
直接使用dotjs-loader无法达到上面的要求,只有修改loader中的返回格式,具体可以参考pug-plain-loader, 逻辑比较简单,传入模板引擎相关参数,options对应webpack 配置中的options参数,最后返回编译后的字符串。
const pug = require('pug') const loaderUtils = require('loader-utils') module.exports = function (source) { const options = Object.assign({ filename: this.resourcePath, doctype: 'html', compileDebug: this.debug || false }, loaderUtils.getOptions(this)) const template = pug.compile(source, options) template.dependencies.forEach(this.addDependency) return template(options.data || {}) }
这里可以发现问题,上面代码中options.data只是在webpack配置时传入的,并不是正式的下发数据,使用预处理模板引擎,为了返回字符串,编译函数执行在loader中进行,没有办法传入数据data,参与编译。
而且模板引擎的相关语法,不能与vue 的模板语法冲突,这样会导致js模板引擎解析后,再进行vue 模板解析时报错
如果只是纯静态页面,可以直接把需要经过模板引擎编译的内容部分抽离出去,使用require引入时,webpack会自动对应loader,解析完成后,只需在当前组件中传入data,通过v-html把生成的字符串当成HTML标签解析后输出。
看完上述内容,你们对如何在vue-loader中引入模板预处理器有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
分享标题:如何在vue-loader中引入模板预处理器
文章地址:http://myzitong.com/article/pigppj.html