javascript - es6 - webpack module rules babel loader

Webpack con babel-loader no reconoce la palabra clave import

Question

Tengo este 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'']
  }
};

... aún así sigo teniendo este error:

$ webpack -v Hash: 2a9a40224beb025cb433 Version: webpack 1.10.5 Time: 44ms [0] ./src/admin/client/index.jsx 0 bytes [built] [failed] ERROR in ./src/admin/client/index.jsx Module parse failed: /project/src/admin/client/index.jsx Line 1: Unexpected reserved word You may need an appropriate loader to handle this file type. | import React from ''react''; | import AdminInterface from ''./components/AdminInterface'';

Yo tengo:

• webpack instalado a webpack mundial y local
• babel-loader , babel-core y babel-runtime instalados
• babel-loader instalado babel-loader todo el mundo, por si acaso

¿Por qué demonios el paquete web aparentemente ignora babel-loader ? ¿O babel-loader no funciona con módulos?

Actualización :

Parece que babel maneja bien el archivo de entrada. Cuando corro:

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

... produce ES5 como se esperaba Por lo tanto, me parece que de alguna manera el webpack no está cargando babel-loader correctamente.

Answer 1

¿Cuál es la versión de su babel? Si la versión de Babel es de hasta 6 +, debe identificar el preset ''es2015'' y ''reaccionar'' de esta manera

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

No olvides instalar estos módulos:

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

Answer 2

Esto parece un caso de error del operador. Mi estructura webpack.config.js no era correcta. Específicamente, necesitaba poner los detalles del cargador dentro de una sección de 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'']
    }
  }
};

Answer 3

Resolví el mismo problema al incluir el es2015 y reaccionar preestablecidos y luego agregarlos al archivo webpack.config.js.

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

como se explica en esta publicación: https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

mi archivo webpack.config.js completo:

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