CODEWITHSUNDEEP
reactjswebpackbabeljs
user776686
user776686

Reputation: 8655

Most succinct setup for developing and buiding a ReactJS application

Apparently all environments for developing and building a ReactJS app consist of:

"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-hot-loader": "^1.3.0",  // optional
"webpack": "^1.12.9",

What exactly is the role of Babel in this setup? Is there anything it does that Webpack cannot do? Does it have to be part of the environment?

Upvotes: 1

Views: 46

Answers (1)

Ori Drori
Ori Drori

Reputation: 191976

I assume that your question refers to babel-core - "why do I need babel-core when I have babel-loader for webpack?"

The rold of babel-loader is obvious - babel-loader transpiles ES6 js/jsx to ES5 using the presets. In addition, webpack 1 doesn't support ES6 modules without babel-loader.

The babel-loader requires as a peer dependency babel-core. According to the NPM blog, NPM 3 doesn't install peer-dependency automatically, and they need to be installed separately.

We will also be changing the behavior of peerDependencies in npm@3. We won’t be automatically downloading the peer dependency anymore. Instead, we’ll warn you if the peer dependency isn’t already installed. This requires you to resolve peerDependency conflicts yourself, manually, but in the long run this should make it less likely that you’ll end up in a tricky spot with your packages’ dependencies.

That's why you also need to include babel-core in your package.json.

Upvotes: 1

Related Questions