Javascript 从'；反应'；导致未捕获的SyntaxError:意外标识符

我已经安装了Webpack3和babel，我的条目

index.js/bundle.js

将构建并运行，我已经使用ES7/8功能进行了测试，但是导入将不起作用，并导致

未捕获的语法错误：意外标识符

。我已尝试将babel配置放入

package.json

以及我的应用程序根目录中的一个单独的

.babelrc

文件中，但在尝试导入时仍然出现错误。我是否缺少一个包或设置

index.js（作品）

webpack.config.js

const path = require('path')

module.exports = {
  context: path.resolve(__dirname, 'app/assets/javascripts/source'),
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'app/assets/javascripts/webpack')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

.babelrc

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

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

package.json

}
  ...
  "license": "MIT",
  "scripts": {
    "build": "webpack",
  },
  "babel": {
    "presets": [
      "env",
      "react"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  }
}

---

它不起作用，因为它没有翻译es6，所以导入语句不起作用，您需要babel-preset-es2015

并对其进行配置。babelrc

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

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

---

试试这个：transform-es2015-modules-amd，这个插件将es2015模块转换为异步模块定义（amd）

更多

---

单面评论：

react

，

react dom

和

prop type

应该是

依赖项

，而不是

devdependency

我尝试了es2015预设，但仍然遇到同样的问题。然而，我的网页包构建日志显示了正在构建的模块。