Веб-пакет с загрузчиком babel не распознает ключевое слово импорта

Question

У меня есть это 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']
  }
};

... все же я все еще получаю эту ошибку:

$ webpack -v
Хеш: 2a9a40224beb025cb433
Версия: webpack 1.10.5
Время: 44 мс
   [0] ./src/admin/client/index.jsx 0 байт [построено] [не выполнено]

ОШИБКА в./src/admin/client/index.jsx
Сбой анализа модуля: /project/src/admin/client/index.jsx Строка 1: неожиданное зарезервированное слово
Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов.
| импорт React из 'реакции';
| импортировать AdminInterface из './components/AdminInterface';

Я имею:

• Установлены webpack глобально и локально
• Установлены babel-loader, babel-core, а также babel-runtime
• Установлены babel-loader глобально, на всякий случай

Почему, черт возьми, webpack, казалось бы, игнорирует babel-loader? Или делает babel-loader не работают с модулями?

Обновление:

Это выглядит как babel обрабатывает входной файл просто отлично. Когда я бегу:

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

... выдает ES5, как и ожидалось. Поэтому, мне кажется, как-то webpack неправильно загружается babel-loader,

Answer 1

Это похоже на случай ошибки оператора. мой webpack.config.js структура не была правильной. В частности, мне нужно было поместить детали загрузчика в 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 2

Я исправил ту же проблему, включив пресеты es2015 и response, а затем добавив их в файл webpack.config.js.

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

как объясняется в этом посте: https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

мой полный файл webpack.config.js:

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

Answer 3

Какая версия вашего babel? Если версия babel до 6+. Вам нужно определить пресет "es2015" и "реагировать", как это

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

Не забудьте установить эти модули:

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