Question

我没有设法使我的jsx在我的Vue应用程序中工作。我仍然收到“ ReferenceError：h未定义”，这意味着babel不能创建我的render方法必需的h全局变量。

似乎该应用程序配置是使用vue cli构建的，但我不知道哪个版本（3支持JSX）。

这是我的配置：

webpack.base.conf.js：

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },

...

我在文件扩展名测试中添加了“ jsx”，因为webpack告诉我缺少此类文件的加载程序。

.babelrc：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2",
    ["vue-app"]
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "istanbul"]
    }
  }
}

我的带有jsx的组件（SellerProductReviews.jsx）：

import locales from './sellerProductsReviews.locales.json';

function renderReviewsHeader() {
  return (
    <thead>
      <tr>
        {locales.header.map(columnName => <td>{columnName}</td>)}
      </tr>
    </thead>)
}

function renderReviews(reviews) {
  return (
    <tbody>
        {
          reviews.map((r) => {
            return (
              <tr>
                <td>{r.review.publicationDate}</td>
                <td>{locales.status.published}</td>
                <td>{locales.reviewType.productReview}</td>
                <td>{r.review.rating}</td>
                <td>{r.review.title}</td>
                <td>{r.reviewer.firstname}</td>
                <td>{r.reviewer.lastname}</td>
              </tr>
            )
          })
        }
    </tbody>)
}

export default {
  name: 'SellerProductsReviews',
  data() {
    return {
      locales
    }
  },
  props: {
    reviews: { type: Array, required: true }
  },
  render(h) {
    return (
      <table>
        {renderReviewsHeader()}
        {renderReviews(this.reviews)}
      </table>
    );
  }
}

知道我想念什么吗？

谢谢

使用Vue.js为JSX配置Webpack和Babel

0 个答案: