javascript - „Este posibil să aveți nevoie de un loader adecvat pentru a gestiona acest tip de fișier” cu Webpack și Babel

Încerc să folosesc Webpack cu Babel pentru a compila resurse ES6, dar primesc următorul mesaj de eroare:

You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'

Iată cum arată configurația mea Webpack:

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

module.exports = {
  entry: './index',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

Iată pasul middleware care folosește Webpack:

var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');

var express = require('express');
var app = express();
var port = 3000;

var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}));

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(port, function(err) {
  console.log('Server started on http://localhost:%s', port);
});

Tot ce face fișierul meu index.js este să importe react, dar se pare că 'babel-loader' nu funcționează.

Folosesc 'babel-loader' 6.0.0.

Răspuns #1

NOTĂ: Următoarele se aplică pentru Babel 6.x și Webpack 1.x. Vezi la final pentru o actualizare.

Trebuie să instalezi presetul es2015:

npm install babel-preset-es2015

și apoi configurează babel-loader:

{
    test: /\.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}

ACTUALIZARE: Pentru cei care dau peste această întrebare cu versiuni mai recente de Babel sau Webpack:

• Pentru Babel >= 7.x, ar trebui să folosiți @babel/preset-env
• Pentru Webpack >= 2.x, ar trebui să folosiți options în loc de query

Răspunsul #2

Asigură-te că ai instalat presetul Babel es2015.

Un exemplu de package.json devDependencies este:

"devDependencies": {
  "babel-core": "^6.0.20",
  "babel-loader": "^6.0.1",
  "babel-preset-es2015": "^6.0.15",
  "babel-preset-react": "^6.0.15",
  "babel-preset-stage-0": "^6.0.15",
  "webpack": "^1.9.6",
  "webpack-dev-middleware": "^1.2.0",
  "webpack-hot-middleware": "^2.0.0"
},

Acum configurează babel-loader în configurația ta webpack:

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

adaugă un fișier .babelrc în rădăcina proiectului tău unde se află modulele node:

{
  "presets": ["es2015", "stage-0", "react"]
}

Mai multe informații:

• babeljs.io - utilizarea Babel cu Webpack

• babeljs.io - documentație despre .babelrc

• react-webpack-cookbook - configurează react cu webpack

• Un depozit de exemplu React-webpack

Răspunsul #3

Dacă folosești Webpack > 3, atunci trebuie să instalezi doar babel-preset-env, deoarece acest preset include es2015, es2016 și es2017.

var path = require('path');
let webpack = require("webpack");

module.exports = {
    entry: {
        app: './app/App.js',
        vendor: ["react","react-dom"]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../public')
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader?cacheDirectory=true',
            }
        }]
    }
};

Aceasta preia configurația din fișierul meu .babelrc:

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers":["last 2 versions"],
                    "node":"current"
                }
            }
        ],["react"]
    ]
}

Răspunsul #4

ACTUALIZARE ECHIPA BABEL:

Suntem super 😸 încântați că încerci să folosești sintaxa ES2015, dar în loc să continui cu presetările anuale, echipa recomandă utilizarea babel-preset-env. Implicit, acesta are același comportament ca presetările anterioare pentru a compila ES2015+ în ES5

Dacă utilizați Babel versiunea 7, va trebui să rulați npm install @babel/preset-env și să aveți "presets": ["@babel/preset-env"] în configurația dvs. .babelrc.

Aceasta va compila toate cele mai recente funcționalități în cod transpilat es5:

Precondiții:

1. Webpack 4+
2. Babel 7+

Pasul 1:: instalare npm --save-dev @babel/preset-env

Pasul 2: Pentru a compila codul JSX în es5, babel oferă pachetul @babel/preset-react pentru a converti fișierul cu extensia reactjsx în cod pe care browserul îl poate înțelege nativ.

Pasul-3: npm install --save-dev @babel/preset-react

Pasul 4: creează fișierul .babelrc în calea rădăcină a proiectului tău unde există webpack.config.js.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Pasul 5: webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path: path.resolve(__dirname, 'output'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
         })
    ]
}

Răspunsul #5

În cazul meu, am avut o astfel de eroare deoarece calea de import era greșită:

Greșit: import Select from "react-select/src/Select";/a fost generat automat de IDE ;)

Corect: import Select from "react-select";