前言

相信大家看了不少vue转react改怎么写一些语法、思想的转变，但是本文和那些毫不相关，本文所说的只做最简单粗暴的怎么把vue文件在react中跑（真跑）起来。

背景

众所周知，vue对于ie的兼容性只支持到ie9（抛开vue3），但是如果你的兼容性需求是ie8怎么办，由于缺少核心的api我们只能放弃使用框架吗？不我们还有react可以用，查询可以知道react版本在0.14以下是支持ie8的，但是公司技术栈是vue怎么办呢？

将vue转成react跑起来！

目标

首先我们进行开发之前得有一个大致得目标导向，如何进行最少的投入，得到最大化的产出呢？初步计划就如下图所示。

1645681095(1).jpg

实现方式

其实有了目标之后关于实现就有比较清晰的思路了

项目配置

主要进行以下几个配置的修改(不包括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直接上流程图阐述解析过程

1645694590(1).jpg

这个就是大概的整体转换流程了，当然了也只是个大概的流程，实际上进行处理的时候进行了很多的语义分析，比如：对于响应式收集的分析，对于局部作用域分析等等。

运行分析

由于最终的结果全部采用的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…

不一样的vue转react（硬核版）

前言

背景

目标