Objective
I am planning to start a web project with reactJS + nodeJS + babel(ES6) + webpack. But I am currently blocked at the step of ES6 environment setup.
Tech Stack
- React: client-side (Views)
- Node: server-side (Server)
- Babel: transpiler of ES6 -> ES5
- Webpack: module bundler
Issue
Cannot run some ES6 statements using node
Steps to launch the app
$ npm install
$ npm run build
$ set DEBUG=myapp:* & npm start
Errortrace:
SyntaxError: Unexpected token export
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Module.require (module.js:367:17)
at require (internal/module.js:16:19)
... ...
My Configurations
- package.json
{
"name": "myapp",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "webpack",
"start": "node ./bin/www"
},
"dependencies": {
"alt": "^0.18.2",
"body-parser": "~1.13.2",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"ejs": "^2.4.1",
"express": "~4.13.1",
"morgan": "~1.6.1",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"serve-favicon": "~2.3.0",
"webpack": "^1.12.14"
},
"devDependencies": {
"babel-cli": "^6.5.1",
"babel-core": "^6.5.2",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"copy-webpack-plugin": "^0.2.0",
"webpack": "^1.12.6",
"webpack-dev-server": "^1.12.1"
}
}
- .babelrc
{
"presets": [
"es2015"
]
}
- webpack.config.js
Project Repository
click here hosted on Github
