ES6がコンパイルされない

Question

誰かが私のwebpack.config.jsファイルで間違っているのを見ていますか？ブラウザは「予期しないトークンのインポート」というエラーを表示します。つまり、ES6構文を認識していません。ローダーに何か問題がありますか？私は依存関係を何度もインストールして再インストールしたので、問題がどこにあるのかは分かりません。あなたにこのエラーが発生しますどのファイル

webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:3000', 
    'webpack/hot/only-dev-server', 
    './public/index.jsx' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    resolve: { 
    root: __dirname, 
    alias: { 
     App: 'public/components/App.jsx', 
     Home: 'public/components/Home.jsx', 
     Footer: 'public/components/Footer.jsx', 
     Inventory: 'public/components/Inventory.jsx', 
     Login: 'public/components/nav/Login.jsx', 
     Navbar: 'public/components/nav/Navbar.jsx', 
     ProductSearch: 'public/components/Product-Search.jsx', 
     SingleProduct: 'public/components/Single-Product.jsx', 
     Product: 'public/components/Product.jsx', 
     Signup: 'public/components/Signup.jsx', 
     LandingNavbar: 'public/components/nav/LandingNavbar.jsx', 
     ProductSearch: 'public/components/ProductSearch.jsx', 
     Examples: 'public/components/Examples.jsx', 
     Pricing: 'public/components/Pricing.jsx', 
     Profile: 'public/components/Profile.jsx', 
     Checkout: 'public/components/Checkout.jsx', 
     Receipt: 'public/components/Receipt.jsx', 
     RequireAuth: 'public/components/auth/require_auth.jsx', 
     Signout: 'public/components/Signout.jsx', 
     Tour: 'public/components/tour/Tour.jsx', 
     BusinessTypes: 'public/components/tour/BusinessTypes.jsx', 
     Customers: 'public/components/tour/Customers.jsx', 
     Features: 'public/components/tour/Features.jsx', 
     GettingStarted: 'public/components/tour/GettingStarted.jsx', 
     MultiStore: 'public/components/tour/MultiStore.jsx', 
     Support: 'public/components/tour/Support.jsx', 
     Actions: 'public/actions/index.js' 
    }, 
    extensions: ['', '.js', '.jsx'] 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
    ], 
    module: { 
    loaders: [{ 
     test: /\.jsx$/, 
     loaders: ['react-hot','babel-loader', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react'], 
     include: path.join(__dirname, 'public') 
    }] 
    } 
}; 

Answer 1

？ public/actions/index.js？ .jsファイルをbabelに渡すことはありません。 あなたはbabel-loaderを2回呼びます。最初はプリセットのない「バベルローダー」として、第2はプリセット付きの「バベル」として。

正しいローダーは次のようになります。

loaders: [{ 
     test: /\.jsx?$/, 
     loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react'], 
     include: path.join(__dirname, 'public') 
    }] 

注テスト正規表現を変更しました。これで、.jsファイルと.jsxファイルがカバーされます。また、プリセットを.babelrcファイルに移動することをお勧めします。

Answer 2

あなたはバベルローダーを2回持っています。あなたのローダーの配列から 'babel-loader'を取り除くだけです。これは、「babel？...」が既にローダを呼び出しているからです。

Answer 3

あなたのpackage.jsonには、babel-loaderが必要です。だから、あなたが実行していることを確認しますあなたのWebPACK設定ファイルのその後

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

この：それが動作する場合

module: { 
    loaders: [{ 
     test: /\.jsx$/, 
     loader: 'babel-loader', 
     query: { 
     presets: ['es2015', 'stage-0', 'react'] 
     }, 
     include: path.join(__dirname, 'public') 
    }] 
    } 

は、その後、「反応するホット」をローダーのリストに追加してみてください。