Question

只需要一些帮助，请我在这场斗争中失去理智。我搜索过很多关于这类问题的帖子，但是这些都没有用，就是我在这里寻求帮助。

我目前正在webpack-dev-server上运行简单的React，当我想建立preact compat时，我只是得到了这个错误：

您可能需要一个合适的加载程序来处理Client.jsx上的此文件类型

这是文件：

Client.jsx

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const renderClient = () => {
  render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
    document.getElementById('app'),
  );
};

renderClient();

webpack.config.js

const path = require('path');
const webpack = require('webpack');

const config = {
  context: __dirname,
  entry: './src/components/Client.jsx',
  devtool: 'cheap-module-eval-source-map',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/public/',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      react: 'preact-compat',
      'react-dom': 'preact-compat',
    },
  },
  devServer: {
    publicPath: '/public/',
    historyApiFallback: true,
  },
  stats: {
    colors: true,
    reasons: true,
    chunks: false,
  },
  plugins: [new webpack.NamedModulesPlugin()],
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'eslint-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: [path.resolve('js'), path.resolve('node_modules/preact-compat/src')],
      },
    ],
  },
};

if (process.env.NODE_ENV === 'production') {
  config.devtool = 'source-map';
  config.plugins = [];
}

module.exports = config;

.babelrc

{
  "plugins": [
    ["transform-react-jsx", { "pragma": "h" }],
    [
      "module-resolver",
      {
        "root": ["."],
        "alias": {
          "react": "preact-compat",
          "react-dom": "preact-compat"
        }
      }
    ]
  ],
  "presets": [
    "react",
    [
      "env",
      {
        "targets": {
          "browsers": "last 2 versions"
        },
        "loose": true,
        "modules": false
      }
    ]
  ],
  "env": {
    "test": {
      "plugins": ["babel-plugin-transform-es2015-modules-commonjs"]
    }
  }
}

Answer 1

在.jsx规则中，您只在目录./js/和./node_modules/preact-compat/src/中包含文件，但您的条目为./src/components/Client.jsx，因此不应用Babel。您还需要将./src/文件添加到规则中。

path.resolve('js')可能应该是path.resolve('src')，除非您的代码中使用了./js/目录。此外，preact-compat/src是不必要的，因为它提供了已编译的代码，将在导入preact-compat时使用。

{
  test: /\.jsx?$/,
  loader: 'babel-loader',
  include: [path.resolve('src')],
},

您可以排除不想要转换的所有内容，而不仅仅包含您需要转换的内容。这通常是node_modules，就像你在ESLint规则中所做的那样。

{
  test: /\.jsx?$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
},

Answer 2

你错过了一个操纵jsx的装载机。如果您使用Babel，可以使用babel-loader将jsx转换为js。

您可以将该加载程序添加到webpack.config.js文件

var config = {
    // Existing Code ....
    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                loader : 'babel'
            }
        ]
    }
}

Preact您可能需要一个合适的加载器来处理这种文件类型

2 个答案: