„Być może trzeba odpowiednią ładowarkę do obsługi tego typu pliku” z Webpack i Babel

Question

Próbuję użyć WebPACK z Babel skompilować aktywa ES6, ale otrzymuję następujący komunikat o błędzie:

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

Tutaj jest to, co mój WebPACK config wygląda następująco:

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

Oto krok middleware, która korzysta z 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); 
}); 

Cały mój plik index.js robi importowanie, ale wygląda na to, że "babel-loader" nie działa.

Używam programu "Babel-Loader" 6.0.0.

Answer 1

Musisz zainstalować es2015 ustawienie:

npm install babel-preset-es2015 

a następnie skonfigurować babel-loader:

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

Answer 2

Upewnij się, że Babel es2015 ustawione zainstalowany.

Przykładem package.json devDependencies jest:

"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" 
}, 

teraz skonfigurować Babel ładowarka w WebPACK config:

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

dodać .babelrc plik do katalogu głównego twojego projektu, w którym znajdują się moduły węzłów:

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

Więcej informacji:

• babeljs.io - using babel with webpack

• babeljs.io - docs on .babelrc

• react-webpack-cookbook - configure react with webpack

• a react-webpack-example repo

Answer 3

Jeśli używasz Webpack> 3, musisz tylko zainstalować babel-preset-env, ponieważ ten zestaw zawiera 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', 
      } 
     }] 
    } 
}; 

To podnosi jego konfigurację z mojego pliku .babelrc:

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

Answer 4

Podczas korzystania Typescript:

W moim przypadku użyłem nowszej składnię WebPACK v3.11 z ich dokumentacji strona Właśnie skopiowałem konfigurację css i style loader z ich strony internetowej. Skomentowany kod (nowsze API) powoduje ten błąd, patrz poniżej.

module: { 
     loaders: [{ 
       test: /\.ts$/, 
       loaders: ['ts-loader'] 
      }, 
      { 
       test: /\.css$/, 
       loaders: [ 
        'style-loader', 
        'css-loader' 
       ] 
      } 
     ] 
     // , 
     // rules: [{ 
     //  test: /\.css$/, 
     //  use: [ 
     //   'style-loader', 
     //   'css-loader' 
     //  ] 
     // }] 
    } 

Prawo sposobem jest umieszczenie w tym:

{ 
     test: /\.css$/, 
     loaders: [ 
      'style-loader', 
      'css-loader' 
     ] 
    } 

w tablicy nieruchomości ładowarki.