web-dev-qa-db-fra.com

Webpack avec babel-loader ne reconnaissant pas le mot-clé d'importation

J'ai ceci webpack.config.js:

module.exports = {
  entry: './src/admin/client/index.jsx',
  output: {
    filename: './src/admin/client/static/js/app.js'
  },
  loaders: [
    {
      test: /\.jsx?$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
        optional: ['runtime']
      }
    }
  ],
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
};

... mais je reçois toujours cette erreur:

 $ webpack -v 
 Hachage: 2a9a40224beb025cb433 
 Version: webpack 1.10.5 
 Durée: 44 ms 
 [0] ./src/admin/ client/index.jsx 0 octet [construit] [échoué] 
 
 ERREUR dans ./src/admin/client/index.jsx[.____.- admin/client/index.jsx Ligne 1: Mot réservé inattendu 
 Vous pouvez avoir besoin d'un chargeur approprié pour gérer ce type de fichier. 
 | import React from 'react'; 
 | import AdminInterface from './components/AdminInterface';;.____.]

J'ai:

  • Installé webpack globalement et localement
  • Installée babel-loader, babel-core, et babel-runtime
  • Installée babel-loader globalement, juste au cas où

Pourquoi diable le webpack ignore-t-il apparemment babel-loader? Ou est-ce que babel-loader ne fonctionne pas avec les modules?

Mise à jour:

Il semble que babel gère très bien le fichier d'entrée. Quand je cours:

./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx

... il produit ES5 comme prévu. Par conséquent, il me semble que webpack ne se charge pas correctement babel-loader.

javascriptecmascript-6webpackbabeljstranspiler
29
Jacob

Cela ressemble à un cas d'erreur d'opérateur. Ma webpack.config.js la structure n'était pas correcte. Plus précisément, je devais mettre les détails du chargeur dans une section module:

module.exports = {
  entry: './src/admin/client/index.jsx',
  output: {
    filename: './src/admin/client/static/js/app.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          optional: ['runtime']
        }
      }
    ],
    resolve: {
      extensions: ['', '.js', '.jsx']
    }
  }
};
33
Jacob

J'ai résolu le même problème en incluant les es2015 et react presets , puis en les ajoutant au fichier webpack.config.js.

npm install --save-dev babel-preset-es2015npm install --save-dev babel-preset-react

comme expliqué dans cet article: https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

mon fichier webpack.config.js complet:

module.exports = {
  context: __dirname + "/src",
  entry: './main',
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { 
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ['es2015', 'react']
        }
      }
    ],
    resolve: {
      extensions: ['.js', '.jsx']
    }
  }
};
15
Adam Bertrand

Quelle est la version de votre babel? Si la version de babel est jusqu'à 6 + .Vous devez identifier le préréglage 'es2015' et 'réagir' comme ceci

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel', // 'babel-loader' is also a legal name to reference
      query: {
        presets: ['react', 'es2015']
      }
    }
  ]
}

N'oubliez pas d'installer ces modules:

npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
10
modao