被用于VueReact(vuereact-combined)的demo用例
在线demo https://devilwjp.github.io/vuereact-for-vuecli3-demo/dist/index.html
- 通过vue create创建一个项目
- 安装相关依赖
npm i react react-dom babel-plugin-transform-react-jsx vuereact-combined -S
- 在src目录里创建一个react_app的目录用来存放react的jsx文件
- 在babel.config.js中进行配置
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
presets: [
// vue的plugin包
'@vue/cli-plugin-babel/preset'
],
// 使用overrides是为了分开配置jsx的解析规则,在react_app里使用react的规则解析,其他使用vue的规则
overrides: [
{
// 这里如果不用函数,会出现报错的情况,还没找到原因
// babel会提示Configuration contains string/RegExp pattern, but no filename was passed to Babel
// 因为filename不存在,如果不存在就必须通过回调返回一个undefined
test:function(filename) {
// 仅对src/react_app目录有效
if (filename !== undefined && filename.indexOf(resolve('src/react_app')) === 0) return filename
},
plugins: [
// 使用react的jsx编译
'transform-react-jsx'
],
presets: [
['@vue/cli-plugin-babel/preset', {
// 关闭vue的jsx编译
jsx: false
}]
]
}
]
}