babel-preset-envがjsxを認識しない

Question

初めてwebpackをビルドしようとしていますが、私はバベルの設定をドキュメントの相対的なものから見ていますが、それは間違っています。アイブ氏は、使用

const path = require('path'); 
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); 

module.exports = { 
    entry: './src/index.js', 
    plugins: [ 
    new UglifyJSPlugin() 
    ], 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.css$/, 
     use: [ 
      'style-loader', 
      'css-loader' 
     ] 
     }, 
     { 
     test: /\.(png|svg|jpg|gif)$/, 
     use: [ 
      'file-loader' 
     ] 
     }, 
     { 
     test: /\.(js|jsx)$/, 
     exclude: /(node_modules)/, 
     use: [ 
      'babel-loader' 
     ] 
     } 
    ] 
    } 
}; 

も：私webpack.config.jsです。ここ

ERROR in ./src/index.js 
Module build failed: SyntaxError: Unexpected token (10:2) 
    8 | 
    9 | ReactDOM.render(
> 10 | <Provider store={store}> 
    | ^
    11 |  <App /> 
    12 | </Provider>, global.document.getElementById('root')); 
    13 | registerServiceWorker(); 

：私はかなりシンプルなアプリ（ほぼデフォルトのアプリ、再来がフックアップして）のビルドでエラーを取得していますすべて同じWebPACKのドキュメントによって提案されたバリエーション：

{ 
    test: /\.js$/, 
    exclude: /(node_modules|bower_components)/, 
    use: { 
    loader: 'babel-loader', 
    options: { 
     presets: ['env'] 
    } 
    } 
} 

と私のpackage.json：

{ 
    "name": "interactor", 
    "version": "0.1.0", 
    "private": true, 
    "babel": { 
    "presets": [ 
     ["env", { 
     "targets": { 
      "browsers": ["last 2 versions"] 
     } 
     }] 
    ] 
    }, 
    "dependencies": { 
    "react": "^16.0.0", 
    "react-bootstrap": "^0.31.3", 
    "react-dom": "^16.0.0", 
    "react-redux": "^5.0.6", 
    "react-scripts": "1.0.14", 
    "redux": "^3.7.2", 
    "redux-thunk": "^2.2.0" 
    }, 
    "scripts": { 
    "start": "webpack --config webpack.config.js", 
    "build": "webpack", 
    "test": "react-scripts test --env=jsdom" 
    }, 
    "devDependencies": { 
    "babel-cli": "^6.26.0", 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-env": "^1.6.0", 
    "css-loader": "^0.28.7", 
    "eslint": "^4.8.0", 
    "eslint-config-airbnb": "^15.1.0", 
    "eslint-plugin-import": "^2.7.0", 
    "eslint-plugin-jsx-a11y": "^5.1.1", 
    "eslint-plugin-react": "^7.4.0", 
    "file-loader": "^1.1.5", 
    "style-loader": "^0.19.0", 
    "uglifyjs-webpack-plugin": "^0.4.6", 
    "webpack": "^3.6.0" 
    } 
} 

と私はindex.jsがあまりにも役に立つかもしれないと思う：私はここで間違って

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import store from './store'; 
import './index.css'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 

ReactDOM.render(
    <Provider store={store}> 
    <App /> 
    </Provider>, global.document.getElementById('root')); 
registerServiceWorker(); 

何をしているのですか？

Answer 1

いつものように、ユーザーエラーですが、多分それは私のような別のnewbを助けるでしょう。私のバベルのプリセットに「反応する」ことは絶対にしないでください。それは

"babel": { 
    "presets": [ 
     "react", 
     ["env", { 
     "targets": { 
      "browsers": ["last 2 versions"] 
     } 
     }] 
    ] 
    } 

ああのように、例えば、見て、あなたが実際にbabel-preset-reactがインストールされていることを確認している必要があります。