vue-cli中如何配置jsx？

Question

现在的项目需要用到jsx，项目中已经安装 babel-plugin-syntax-jsxbabel-plugin-transform-vue-jsxbabel-helper-vue-jsx-merge-propsbabel-preset-es2015等插件 但是就是报错 是jsx语法写错了么？

Answer 1

https://github.com/vuejs/babe...

是文档写得不够详细还是实在不清楚babel配置相关

Answer 2

然而吾辈还是死掉了。。。

环境

• vue-cli 3
• Windows 10

错误信息

Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: [路径]\RegConfig.vue: [路径]\RegConfig.vue: Duplicate declaration "h" (This is an error on an internal node. Probably an internal err
or.)

package.json

"devDependencies": {
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
    "@vue/babel-preset-jsx": "^1.1.1",
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^6.3.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.0.0",
    "git-rev-sync": "^1.12.0",
    "husky": "^3.0.5",
    "lint-staged": "^9.2.5",
    "mockjs": "^1.0.1-beta3",
    "prettier": "^1.18.2",
    "prettier-eslint-cli": "^5.0.0",
    "sass": "^1.18.0",
    "sass-loader": "^7.1.0",
    "stylelint": "^11.0.0",
    "stylelint-config-prettier": "^5.2.0",
    "stylelint-config-standard": "^19.0.0",
    "stylelint-order": "^3.1.1",
    "stylelint-prettier": "^1.1.1",
    "stylelint-scss": "^3.11.1",
    "vue-cli-plugin-webpack-bundle-analyzer": "^1.4.0",
    "vue-router": "^3.1.3",
    "vue-template-compiler": "^2.6.10"
}

babel.config.js

module.exports = {
    presets: ['@vue/app', '@vue/babel-preset-jsx'],
}

楼主有什么好的方法解决么？

Answer 3

采用vue cli3创建的项目（babel版本为7），不需要按照文档添加"presets": ["@vue/babel-preset-jsx"]。

// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

如果你项目的babel版本为6，请参考楼上提供的文档，或者看Element2.13.2的源码也可以。