ES6 无法编译答案

【问题标题】：ES6 not compilingES6 无法编译
【发布时间】：2016-08-24 12:53:35
【问题描述】：

有人在我的 webpack.config.js 文件中看到我做错了什么吗？浏览器给我一个错误提示“unexpected token 'import'”，这意味着它无法识别 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')
    }]
  }
};

【问题讨论】：

你安装babel-preset-es2015了吗？

标签： reactjs ecmascript-6 webpack react-hot-loader

【解决方案1】：

什么文件给你这个错误？ 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 文件中

【讨论】：

public/reducers/index.js 是抛出错误的文件，那么我应该对加载程序做些什么来纠正这个问题？
谢谢。如果我添加了一个 babelrc 文件，我会在哪里引用它？还是我需要参考它？
把它放在“项目根目录”中的 webpack.config.js 旁边。您不必在任何地方提及它。

【解决方案2】：

你有两次 babel 加载器。只需从您的加载程序数组中删除“babel-loader”。这是因为“babel?...”已经在调用加载器了。

【讨论】：

【解决方案3】：

你的 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')
    }]
  }

如果可行，请尝试将“react-hot”添加到您的加载程序列表中。

【讨论】：