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