index.js의 구문 분석 오류

Question

반응 핫 로더를 사용하려고합니다. 터미널에서 "npm start"명령을 실행하는 동안 오류가 발생합니다. 어떤 사람들은 문제가 무엇인지 말해 줄 수 있습니까? 핫 로더가 작동하지만 브라우저에서 아무 것도 시작하지 않기 때문에 고생하고 있습니다. 내가 오류 리튬을 얻을 때 webpack.config.js 보통

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devServer: { 
     inline: true, 
     contentBase: './src', 
     port: 3000 
    }, 

    devtool: 'eval', 
    entry: [ 
     'webpack-dev-server/client?http://localhost:3000', 
     'webpack/hot/only-dev-server', 
     './dev/js/index.js' 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loaders: ['react-hot', 'babel'], 
       include: path.join(__dirname, 'src') 
      }, 
      { 
       test: /\.scss/, 
       loader: 'style-loader!css-loader!sass-loader' 
      } 
     ] 
    }, 
    output: { 
     path: path.resolve(__dirname, 'src'), 
     filename: 'js/bundle.min.js' 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin() 

    ] 
}; 

package.json

{ 
    "name": "react-redux-template", 
    "version": "1.0.0", 
    "main": "index.js", 
    "scripts": { 
    "dev": "webpack", 
    "start": "node server.js" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-polyfill": "^6.9.1", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-register": "^6.9.0", 
    "cross-env": "^1.0.8", 
    "css-loader": "^0.23.1", 
    "expect": "^1.20.1", 
    "material-ui": "^0.15.4", 
    "node-libs-browser": "^1.0.0", 
    "node-sass": "^3.8.0", 
    "react": "^15.3.1", 
    "react-addons-test-utils": "^15.1.0", 
    "react-dom": "^15.3.1", 
    "react-redux": "^4.4.5", 
    "react-tap-event-plugin": "^1.0.0", 
    "redux": "^3.5.2", 
    "redux-logger": "^2.6.1", 
    "redux-promise": "^0.5.3", 
    "redux-thunk": "^2.1.0", 
    "sass-loader": "^4.0.0", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.1", 
    "webpack-dev-middleware": "^1.6.1", 
    "webpack-dev-server": "^1.14.1", 
    "webpack-hot-middleware": "^2.11.0" 
    }, 
    "devDependencies": { 
    "babel-plugin-react-transform": "^2.0.2", 
    "babel-preset-stage-0": "^6.5.0", 
    "react-hot-loader": "^1.3.0", 
    "react-transform-hmr": "^1.0.4" 
    } 
} 

Answer 1

파일

import 'babel-polyfill'; 
import React from 'react'; 
import ReactDOM from "react-dom"; 
import {createStore} from 'redux' 
import {Provider} from 'react-redux' 
import allReducers from './reducers' 
import App from './Components/App' 
import injectTapEventPlugin from 'react-tap-event-plugin'; 

const store = createStore(allReducers); 
injectTapEventPlugin(); 
ReactDOM.render(
    <Provider store = {store}> 
     <App/> 
    </Provider>, 
    document.getElementById('root') 
); 

하는 index.js

이것은 jsx를 transpile 할 수 없기 때문입니다. 귀하의 경우에는 그것을 달성하기 위해 바벨 - 로더를 사용하지 않기 때문에 그것이라고 믿습니다. 또한 선물을 사용하려면 babel-loader에 쿼리 매개 변수로 포함시켜야합니다. 나는 또한 transpilation 시간을 줄이기 위해 노드 모듈을 제외하고 싶다.

{ 
    loader: 'babel-loader', 
    query: { 
    presets:['es2015','react','stage-0'] // Babel presets, I use stage-0 
    }, 
    test: /\.js$/, 
    exclude: /node_modules/, 
}