vue cli JSX config

[zhouhm]

我看了您的文档 https://happy-coding-clans.github.io/vue-easytable/#/en/doc/table/api 没找到componentName属性，我想加入自定义vue组件，在每行后面加入修改和删除按钮

[huangshuwei]

不需要使用 componentName 属性进行定制，现在支持 jsx 内容，自定义内容更简单：

通过 renderBodyCell()函数 实现单元格自定义功能，文档：https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-custom?anchor=body-zi-ding-yi-dan-yuan-ge

[zhouhm]

          {
            field: "",
            key: "g",
            title: "下载授权码",
            width: "",
            center: "left",
            renderBodyCell: ({ row, column, rowIndex }, h) => {
                return (
                    <span>
                        <button
                            class="button-demo"
                            on-click={() => this.editRow(rowIndex)}
                        >
                            下载
                        </button>
                    </span>
                );
            },
          }

拷贝的您的代码，但npm run build时报错

> test1@0.1.0 build
> vue-cli-service build

⠇  Building for production...

 ERROR  Failed to compile with 1 error                                                                                                             10:51:59 PM

 error  in ./src/views/Account.vue?vue&type=script&lang=js&

Module parse failed: Unexpected token (103:20)
File was processed with these loaders:
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|             renderBodyCell: ({ row, column, rowIndex }, h) => {
|                 return (
>                     <span>
|                         <button
|                             class="button-demo"

 @ ./src/views/Account.vue?vue&type=script&lang=js& 1:0-176 1:192-195 1:197-370 1:197-370
 @ ./src/views/Account.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.

[huangshuwei]

参考你的配置是不是缺少（vue 脚手架安装默认应该没问题的）： https://codesandbox.io/s/ydyw1?file=/.babelrc

[zhouhm]

[zhouhm@myfed test1]$ find . -name '.babelrc'
./node_modules/vue-loader/.babelrc
./node_modules/vue-style-loader/.babelrc
./node_modules/vue-monthly-picker/.babelrc
./node_modules/esrecurse/.babelrc
[zhouhm@myfed test1]$ cat ./node_modules/vue-loader/.babelrc
{
  "presets": [
    ["env", { "modules": false }]
  ]
}
[zhouhm@myfed test1]$ cat ./node_modules/vue-style-loader/.babelrc
{
  "plugins": ["transform-es2015-modules-commonjs"]
}
[zhouhm@myfed test1]$ cat ./node_modules/vue-monthly-picker/.babelrc
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

[zhouhm]

难道是我的环境少组件了？

[zhouhm]

我都是用脚手架安装的啊

[zhouhm@myfed test1]$ npm list
test1@0.1.0 /home/zhouhm/vuedemo/test1
├── @vue/cli-plugin-router@4.5.13
├── @vue/cli-plugin-vuex@4.5.13
├── @vue/cli-service@4.5.13
├── axios@0.21.1
├── bindings@1.5.0 extraneous
├── bootstrap-vue@2.21.2
├── bootstrap@4.6.0
├── dayjs@1.10.7
├── file-uri-to-path@1.0.0 extraneous
├── moment-timezone@0.5.34
├── moment@2.29.1
├── nan@2.15.0 extraneous
├── vue-easytable@2.12.0
├── vue-monthly-picker@0.2.8
├── vue-router@3.5.2
├── vue-template-compiler@2.6.14
├── vue@2.6.14
└── vuex@3.6.2

[zhouhm]

安装了两个组件

$ npm install @vue/babel-preset-jsx
$ npm install @vue/cli-plugin-babel

可是编译还是报错

$ npm run build

> test1@0.1.0 build
> vue-cli-service build

⠴  Building for production...

 ERROR  Failed to compile with 1 error                                                                                                             11:49:48 PM

 error  in ./src/views/Account.vue?vue&type=script&lang=js&

Syntax Error: Thread Loader (Worker 2)
/home/zhouhm/vuedemo/test1/src/views/Account.vue: Support for the experimental syntax 'jsx' isn't currently enabled (103:21):

  101 |             renderBodyCell: ({ row, column, rowIndex }, h) => {
  102 |                 return (
> 103 |                     <span>
      |                     ^
  104 |                         <button
  105 |                             class="button-demo"
  106 |                             on-click={() => this.editRow(rowIndex)}

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

 @ ./src/views/Account.vue?vue&type=script&lang=js& 1:0-321 1:337-340 1:342-660 1:342-660
 @ ./src/views/Account.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.

我现在的npm 包列表

[zhouhm@myfed test1]$ npm list
test1@0.1.0 /home/zhouhm/vuedemo/test1
├── @vue/babel-preset-jsx@1.2.4
├── @vue/cli-plugin-babel@4.5.15
├── @vue/cli-plugin-router@4.5.13
├── @vue/cli-plugin-vuex@4.5.13
├── @vue/cli-service@4.5.13
├── axios@0.21.1
├── bindings@1.5.0 extraneous
├── bootstrap-vue@2.21.2
├── bootstrap@4.6.0
├── dayjs@1.10.7
├── file-uri-to-path@1.0.0 extraneous
├── moment-timezone@0.5.34
├── moment@2.29.1
├── nan@2.15.0 extraneous
├── vue-easytable@2.12.0
├── vue-monthly-picker@0.2.8
├── vue-router@3.5.2
├── vue-template-compiler@2.6.14
├── vue@2.6.14
└── vuex@3.6.2

[zhouhm]

参考您的建议在项目根目录下手工建了一个.babelrc文件，内容就用您的配置

{
    "presets": [
        "@vue/cli-plugin-babel/preset"
    ]
}

好用了，编译成功了。我以为安装好插件就可以了呢，还得手工配置，一点都不懂啊 也参考了一下https://exerror.com/syntaxerror-support-for-the-experimental-syntax-jsx-isnt-currently-enabled/ 再次感谢老大，牛人啊！一下就猜到问题所在了

[huangshuwei]

解决就好