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


Posted in Javascript onSeptember 04, 2019

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

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

<style lang="sass">
 ...
</style>

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

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

<template lang="pug">
 div
 h1 Hello world!
</template>

1. 支持哪些模板引擎

v14 或更低版本使用 consolidate 来编译 <template lang="xxx">, 所以支持的模板引擎,从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, 所以安装完可以直接在<template/>中使用,

/* 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标签解析后输出。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript smipleChart 简单图标类
Jan 12 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
解决layer图标icon不加载的问题
Sep 04 #Javascript
JSX在render函数中的应用详解
Sep 04 #Javascript
关于layui的动态图标不显示的解决方法
Sep 04 #Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 #Javascript
简单谈谈javascript高级特性
Sep 04 #Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 #Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 #Javascript
You might like
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
详解php的socket通信
2015/08/11 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
党员思想汇报范文
2013/12/30 职场文书
奥运会口号
2014/06/13 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
焦裕禄观后感
2015/06/03 职场文书
承兑汇票延期证明
2015/06/23 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers