vue远程加载sfc组件思路详解

2023-08-04 00:30:04 72

问题

在我们的vue项目中（特别是后台系统），总会出现一些需要多业务线共同开发同一个项目的场景，如果各业务团队向项目中提供一些公共业务组件，但是这些组件并不能和项目一起打包，因为项目中不能因为某个私有模块的频繁变更而重复构建发布。

^_^不建议在生产环境使用，代码包含eval

思路

在这种场景下我们需要将公共的业务组件部署到服务端，由客户端请求并渲染组件。

服务端解析.vue文件

使用vue-template-compiler模板解析器，解析SFC（单文件组件）

constcompile=require('vue-template-compiler')

//获取sfc组件的源码
conststr=fs.readFileSync(path.resolve(__dirname,`../components/sfc.vue`),'utf-8')

//vue-loader内置，现在用来解析SFC（单文件组件）
letsfc=compile.parseComponent(str)

//获取sfc组件配置
letsfcOptions=getComponentOption(sfc)

getComponentOption获取sfc组件配置

import{uuid}from'utilscore'
importstylusfrom'stylus'
importsassfrom'sass'
importlessfrom'less'
constgetComponentOption=sfc=>{
//生成data-u-id
constcomponentId=uuid(8,16).toLocaleLowerCase()
//标签添加data-u-id属性
consttemplate=sfc.template?tagToUuid(sfc.template.content,componentId):''
//转化style（less、sass、stylus）
letstyles=[]
sfc.styles.forEach(sty=>{
switch(sty.lang){
case'stylus':
stylus.render(sty.content,(err,css)=>styles.push(formatStyl(sty,css,componentId)))
break;
case'sass':
case'scss':
styles.push(formatStyl(sty,sass.renderSync({data:sty.content}).css.toString(),componentId))
break;
case'less':
less.render(sty.content,(err,css)=>styles.push(formatStyl(sty,css,componentId)))
break;
}
})
letoptions={
script:sfc.script?$require(null,sfc.script.content):{},
styles,
template
}
returnJSON.stringify(options,(k,v)=>{
if(typeof(v)==='function'){
let_fn=v.toString()
return/^function()/.test(_fn)?_fn:fn.replace(/^/,'function')
}
returnv
})
}

tagToUuid 给template中的标签追加data-u-id

consttagToUuid=(tpl,id)=>{
varpattern=/<[^\/]("[^"]*"|'[^']*'|[^'">])*>/g
returntpl.replace(pattern,$1=>{
return$1.replace(/<([\w\-]+)/i,($2,$3)=>`<${$3}data-u-${id}`)
})
}

formatStyl处理样式的scoped

constformatStyl=(sty,css,componentId)=>{
letcssText=css
if(sty.scoped){
cssText=css.replace(/[\.\w\>\s]+{/g,$1=>{
if(/>>>/.test($1))return$1.replace(/\s+>>>/,`[data-u-${componentId}]`)
return$1.replace(/\s+{/g,$2=>`[data-u-${componentId}]${$2}`)
})
}
returncssText
}

$require执行其中的的JavaScript代码，并返回值

const$require=(filepath,scriptContext)=>{
constfilename=path.resolve(__dirname,`../${filepath}`);
constmodule={exports:{}}
letcode=scriptContext?scriptContext:fs.readFileSync(filename,'utf-8')
letexports=module.exports
code=`(function($require,module,exports,__dirname,filename){$[code]})($require,module,exports,__dirname,filename)`
eval(code)
returnmodule.exports
}

客户端请求组件并渲染

封装前端远程组件-remote.vue

远程组件实践

服务端sfc组件，注意javascript块要使用module.exports导出，引入脚本使用$require




.test{
.test2{
color:red;
}
p{
color:red
}
}

客户端渲染

//temolate


//script
methods:{
handleClick(v){
console.log(v)//点我}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue远程加载sfc组件思路详解

热门推荐

随机推荐