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

回答

相关问题