Ecmascript 6 将具有ES6语法的文件用作网页包入口点时分析失败

我正在尝试使用Webpack传输一些使用ES6语法和JSX编写的源文件。但是，当我运行Webpack命令时，我得到以下错误

ERROR in ./app/App.jsx
Module parse failed: ./app/App.jsx Line 5: Unexpected token
You may need an appropriate loader to handle this file type.
| 'use strict';
| 
| import React from 'react';
| import { RouteHandler } from 'react-router';
| 
 @ multi main

正如您在下面看到的，我使用的是babel加载程序，但在我看来，加载程序无法处理“import”语法。知道为什么会这样吗

下面看一下我们的基本文件结构

--/app
----/components
------/shared
--------NavigationBar.js
----App.jsx
--webpack.config.js
--package.json

这是我们的package.json文件

// package.json

{
  "scripts": {
    "start": "webpack-dev-server --hot --inline",
  },
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.6",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "history": "^1.13.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.0"
  }
}

这是我们的webpack.config.js文件

// webpack.config.js

module.exports = {
  context: __dirname + '/app',
  entry: './App.jsx',

  output: {
    filename: 'app.js',
    path: __dirname + '/dist',
  },

  module: {
    loaders: [
      {
        test: /\.js?$/,
        loaders: ['react-hot', 'babel'],
        exclude: /node_modules/
      }
    ]
  },

  resolve: {
    extensions: ['', '.js', '.jsx']
  },
};

最后，这里是/app/app.jsx

// App.jsx

'use strict';

import React from 'react';
import { RouteHandler } from 'react-router';

import NavigationBar from './components/shared/NavigationBar';

class App extends React.Component {
  render() {
    return (
      <div>
        <NavigationBar />
        <RouteHandler />
      </div>
    );
  }
}

export default App;

//App.jsx
"严格使用",；
从“React”导入React；
从“react router”导入{RouteHandler}；
从“./components/shared/NavigationBar”导入导航栏；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认应用程序；

---

如果您需要更多信息来诊断问题，请告诉我。提前感谢您的帮助。

从Babel 6开始，您需要手动声明预设，请检查

基本上，在项目的根目录中，您需要一个包含以下内容的

.babelrc

：

{
  "presets": [ "es2015", "react" ]
}

以及package.json中相应的npm模块：

// package.json

{
  "scripts": {
    "start": "webpack-dev-server --hot --inline",
  },
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.6",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "history": "^1.13.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.0"
  }
}

---

我的头也撞了一会儿！我的问题最终也是如此。我使用的JS文件实际上没有被webpack获取

在我的例子中，我是在一个新的源目录中开发的，我没有告诉webpack。为了说明这一点，我只需在我的Babel JS加载程序配置的

include

键中添加另一个条目

loaders: [
  {
    test: /\.js$/,
    loaders: ['babel?' + JSON.stringify({
      plugins: ['transform-runtime', 'transform-decorators-legacy'],
      presets: ['es2015', 'stage-0', 'react'],
    })],
    include: [
      path.join(__dirname, 'src'),
      path.join(__dirname, 'another_source_directory')], // <-- this
  }
]

装载机：[
{
测试：/\.js$/,，
加载器：['babel？'+JSON.stringify({
插件：['transform-runtime'，'transform decorators legacy']，
预设：['es2015'、'stage-0'、'react']，
})],
包括：[
join（uu dirname，'src'），
join（uuu dirname，'other_usource_udirectory'）]，//几乎每天都会问到这个问题的可能重复项。使用搜索或浏览babeljs标记，您应该不难找到相关信息。@FelixKling我实际上已经尝试过这个解决方案，但它没有解决问题。因为在指定预设后问题没有解决，所以我删除了它们。在在对我的网页配置文件中的代码进行紧张的视觉检查时，我还发现我在文件扩展名的regex测试中有一个输入错误。你看，我的入口点是app/app.jsx，但是regex测试
/\.js？$/
与.jsx扩展名不匹配。因此我的入口点没有被传输。在修复后，我发现丢失的presets也是一个问题。谢谢大家的帮助。