web-dev-qa-db-ja.com

babel-loaderを使用したWebpackがインポートキーワードを認識しない

私はこれを持っています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 
時間：44ms 
 [0] ./src/admin/ client/index.jsx 0 bytes [built] [failed] 
 
 ./ src/admin/client/index.jsx 
 Module parse error failed：/ project/src/admin/client/index.jsx 1行目：予期しない予約語
このファイルタイプを処理するには、適切なローダーが必要な場合があります。
 | import React from 'react'; 
 | import AdminInterface from './components/AdminInterface';

私が持っています：

  • webpackをグローバルおよびローカルにインストールしました
  • インストール済みbabel-loader、babel-core、およびbabel-runtime
  • インストール済みbabel-loader念のため、グローバルに

なぜ地獄はbabel-loader？または、babel-loaderモジュールでは動作しませんか？

更新：

babelは入力ファイルをうまく処理しているように見えます。実行すると：

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

... ES5が期待どおりに出力されます。したがって、どうやらwebpackが正しくロードされないbabel-loader。

javascriptecmascript-6webpackbabeljstranspiler
29
Jacob

これは、オペレーターエラーの場合のように見えます。僕の 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']
    }
  }
};
33
Jacob

es2015とreactpresetsを含めて同じ問題を修正し、それらを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']
    }
  }
};
15
Adam Bertrand

Babelのバージョンは何ですか？babelのバージョンが最大6+の場合、このようにプリセット「es2015」と「react」を識別する必要があります

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
10
modao