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

Question

只需要一些帮助，我就会因为这场斗争而失去理智。我搜索了很多这类相同问题的帖子，但它不起作用，这就是我在这里寻求帮助。

我目前正在运行的简单反应的的WebPack-dev的服务器上，当我要建立的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，因此巴贝尔并不适用于它。您还需要将./src/文件添加到规则。

path.resolve('js')应该可能是path.resolve('src')，除非您有从您的代码中使用的./js/目录。另外，preact-compat/src是不必要的，因为它运送了一个已经编译好的代码，当您导入preact-compat时将使用该代码。

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

而是只包括你需要什么transpile的，您可以排除一切你不想transpile。正如你在ESLint规则中所做的那样，这通常是node_modules。

{ 
    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' 
      } 
     ] 
    } 
}