前言
相信大家看了不少vue转react改怎么写一些语法、思想的转变,但是本文和那些毫不相关,本文所说的只做最简单粗暴的怎么把vue文件在react中跑(真跑)起来。
背景
众所周知,vue对于ie的兼容性只支持到ie9(抛开vue3),但是如果你的兼容性需求是ie8怎么办,由于缺少核心的api我们只能放弃使用框架吗? 不我们还有react可以用,查询可以知道react版本在0.14以下是支持ie8的,但是公司技术栈是vue怎么办呢?
将vue转成react跑起来!
目标
首先我们进行开发之前得有一个大致得目标导向,如何进行最少的投入,得到最大化的产出呢?初步计划就如下图所示。
实现方式
其实有了目标之后关于实现就有比较清晰的思路了
项目配置
主要进行以下几个配置的修改(不包括css处理的)
- babel中需要把@vue/babel-preset(或者@vue/babel-preset-jsx)配置改成@babel/preset-react
- webpack中不能使用vue-loader对于.vue文件作为处理(同时不能使用vue-loader-plugin具体原因不做过多解释,这是vue-loader的一部分感兴趣可以看源码或者直接问我)
- 将module.rules中的.vue文件的规则改造为['cache-loader', 'babel-loader?cacheDirectory', 'xxx'(该配置为我们主要实现的目标,将vue转化为可以识别的react语法)]
这一步只是作为一个简单的项目运行配置基础分析,最关键是将vue的配置剔除,加上react的配置,我们需要做的是在loader中把vue文件接收输出一个react的jsx文件即可
转换分析
当然了作为最关键的这个loader需要一个明确的可行性分析才行,那么还是先来比对两段代码(注:这里的react使用版本为0.14)
vue代码
<template>
<div :style="{background: 'pink'}">
{{ testData }}
</div>
</template>
<script>
export default {
name: "First",
data() {
return {
testData: '这是第一段的vue2react'
};
}
};
</script>
复制代码
react代码
import React, { Component } from 'react';
export default class First extends Component {
constructor (props) {
super(props);
this.state = {
testData: '这是第一段的vue2react'
};
}
render () {
return <div style={{
background: 'pink'
}}>{this.state.testData}</div>;
}
}
复制代码
当我们将vue翻译为下面react的代码时就成功了,接下来我们就不多BB直接上流程图阐述解析过程
这个就是大概的整体转换流程了,当然了也只是个大概的流程,实际上进行处理的时候进行了很多的语义分析,比如:对于响应式收集的分析,对于局部作用域分析等等。
运行分析
由于最终的结果全部采用的react的环境,只是对于vue进行了语义翻译而已,所以整个原型链的上方法基本上都挂了。。。。所以需要使用的地方都需要自行查找与之对应的react方法,或者实现与之对应的react方法才行。
其次,在运行时由于中途的loader导致了报错信息比较迷惑,并且暂未进行报错信息处理,所以对于报错原因来看不是很好分析。
牛逼的来了,由于采用了这种分析方案,所以可以同时写vue和react让团队成员无所适从,我到底该写什么
比如这种奇葩的一个react中套vue,或者一个vue中套react都可以完美运行
运行截图
结尾
这个项目其实没有完成,只能说暂时可以使用而已,这里放出npm地址以及示例项目,感兴趣的可以去下载哦 npm: npm i vtr-loader www.npmjs.com/package/vtr…
gitee: gitee.com/beon/vue2re…