vue+jsx+webpack4

改造原有webpack4+vue的项目，使之支持jsx语法

1. 安装依赖

 npm i --save-dev @vue/babel-preset-jsx  @vue/babel-helper-vue-jsx-merge-props 

2. babel.config配置

  presets: [
    ['@vue/app', {
      useBuiltIns: 'entry'
    }],
    ['@vue/babel-preset-jsx',{  // +++ 增加jsx解析支持
      "vModel": true, // 支持vModel指令
      "vOn": true,  // 支持vOn指令
      "injectH": false // 默认会注入一个h(createElement的语法糖)，会与vue render函数注入的createElement冲突，这个配置要设置false，否则项目启动会报错
    }]
    ....
  ],
  ....

3. webpack.base.conf 增加配置

      {
        test: /\.(js|jsx|vue)$/,  // +++ 增加jsx检测
        enforce: 'pre',
        exclude: /node_modules/,
        include: [resolve('../src')],
        use: [
          'happypack/loader?id=happyEslintLoader',
        ]
      },
      ....
      {
        test: /\.(js|jsx)$/, // +++ 增加jsx
        exclude: /node_modules/, // /node_modules\/element-ui/
        include: [resolve('../src')],
        use: [
          'happypack/loader?id=happyBabel'
        ]
      },
      ....

4. jsx中自定义属性props和自定义事件、原生dom事件

const Demo = () => {
  const Demo1Props = {
    props: { // 自定义属性
      width: '100',
      ...
    },
    on: {
      change(e) { // 自定义事件
        console.log(e)
      }
      ...
    },
    nativeOn: {
      click(e) { // 原生click事件
        console.log(e)
      }
      ...
    }
  }
  return <Demo1 {...Demo1Props} />
}

自定义事件要写成：on+自定义事件名