0

只是需要一些帮助，请我在这场斗争中失去理智。我已经搜索了很多此类相同问题的帖子，但没有成功，这就是我在这里寻求帮助的原因。

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

您可能需要适当的加载器来处理 Client.jsx 上的这种文件类型

这是文件：

客户端.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"]
    }
  }
}
4

2 回答 2

1

在您的.jsx规则中，您仅包含目录中的文件./js/and ./node_modules/preact-compat/src/，但您的条目是./src/components/Client.jsx，因此 Babel 不适用于它。您还需要将./src/文件添加到规则中。

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

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

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

{
  test: /\.jsx?$/,
  loader: 'babel-loader',
  exclude: /node_modules/,
},
于 2017-08-27T21:59:06.607 回答
0

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

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

var config = {
    // Existing Code ....
    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                loader : 'babel'
            }
        ]
    }
}
于 2017-08-25T07:18:25.557 回答