ES6不編譯

有沒有人在我的webpack.config.js文件中看到我在做什麼錯了？瀏覽器給我一個錯誤，說「意外標記」導入「」，這意味着它不識別ES6語法。我在裝載機上做錯了什麼？我已經多次安裝並重新安裝了依賴項，所以我認爲這不是問題所在。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') 
    }] 
    } 
};

來源

2016-04-29 Mjuice

你安裝了'babel-preset-es2015'嗎？ –

什麼文件給你這個錯誤？ public/actions/index.js？您沒有將您的.js文件傳遞給babel。而你叫babel-loader兩次。首先是沒有任何預設的「babel-loader」，第二個是帶有預設的「babel」。

正確的裝載機將是：

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

注意改變測試正則表達式。現在它涵蓋.js和.jsx文件。我建議將預設移動到.babelrc文件中

來源

2016-04-29 11:29:16

public/reducers/index.js是拋出錯誤的文件，那麼我應該怎麼做才能加載器來糾正這個錯誤？ – Mjuice

謝謝。如果我添加了一個babelrc文件，我在哪裏可以參考它？或者我需要參考它？ – Mjuice

只需將它放在「project root」中的webpack.config.js旁邊即可。你不必在任何地方提及它。 –

您有babel加載器兩次。從你的裝載機陣列中刪除'babel-loader'。這是因爲「babel？...」已經在調用裝載器了。

來源

2016-04-29 11:37:26

你的package.json必須有babel-loader。所以一定要運行：

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

那麼這在你的WebPack配置文件：

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

如果這樣的作品，然後嘗試添加「反應熱」到你的裝載機清單。

來源

2016-04-29 11:38:02

回答

相關問題