vue-cli 3.x 项目，如何增加对 jsx 的支持？

Question

项目代码里引入了 element-ui 源码里的 scrollbar 组件，后者在 node_modules/element-ui/packages/scrollbar/src/main.js 文件里通过 render(h) 进行组件渲染。

本项目启动时报错如下：

请问如何在 vue-cli 项目里增加对 jsx 的支持？需要安装什么插件，babel.config.js 又该如何配置？
谢谢！

Answer 1

用了babel7的问题，降级到babel6就可以了
把vue-cli创建项目的依赖更新下，卸掉原本的babel-core,install babel6的相关npm包,package.json的依赖如下：

{
    //...
    "devDependencies": {
        "@vue/cli-plugin-eslint": "^4.1.0",
        "@vue/cli-service": "^4.1.0",
        "babel-core": "^6.26.3",
        "babel-eslint": "^10.0.3",
        "babel-loader": "^7.1.5",
        "babel-plugin-syntax-jsx": "^6.18.0",
        "babel-plugin-transform-vue-jsx": "^3.7.0",
        "babel-preset-env": "^1.7.0",
        "eslint": "^5.16.0",
        "eslint-plugin-vue": "^5.0.0",
        "vue-template-compiler": "^2.6.10"
      }
}

然后修改babel.config.js为.babelrc
配置如下

{
  "presets": [
    "env"
  ],
  "plugins": [
    "transform-vue-jsx"
  ]
}

添加vue.config.js文件修改webpack的配置

const path = require('path');

function resolve(name) {
  return path.resolve(__dirname,name)
}

module.exports = {
  chainWebpack: config => {
    const jsRule = config.module.rule('js');
    jsRule.uses.clear();

    jsRule
      .test(/\.js$/)
      .include
        .add( resolve('node_modules/element-ui') )
        .add( resolve('src') )
        .end()
      .use('babel-loader')
        .loader('babel-loader')
        .end();
  }
}

在.vue文件中就可以直接引packages里的组件了

<template>
  <div>
    <Scrollbar />
  </div>
</template>
<script>
import Scrollbar from 'element-ui/packages/scrollbar';

export default {
  name: 'app',
  components: {
    Scrollbar,
  },
  data() {
    return {}
  },
}
</script>

Answer 2

vue-cli3默认是支持jsx格式的，但写法与react的jsx不一样，文件还是.vue的，就是平常的vue文件，不要template标签，在script里面写jsx是可以解析的

Answer 3

多看看文档：babel-plugin-transform-vue-jsx

Answer 4

不用降到babel6
这样就行：将babel-plugin-transform-vue-jsx升级成4以上的

Babel Compatibility Notes

• If using Babel 7, use 4.x
• If using Babel 6, use 3.x

Answer 5

找到解决方法了，vue-cli 本来就支持jsx语法，是 babel 默认会排除 node_modules 里面的文件。在文档里有提到：

默认情况下，babel-loader 会排除 node_modules 依赖内部的文件。如果希望显性编译一个依赖的模块，你需要将其添加入 vue.config.js 中的 transpileDependencies 选项
babel文档

在 vue.config.js 里面添加 transpileDependencies: ['element-ui'] 就可以了

Answer 6

所以楼主解决了吗