Babel file is copied without being transformed

Question

I have this code:

\"use strict\";

import browserSync from \"browser-sync\";
import httpProxy from \"http-proxy\";

let proxy = httpProxy.createProxyServer({         


        

Answer 1

Babel is a transformation framework. Pre-6.x, it enabled certain transformations by default, but with the increased usage of Node versions which natively support many ES6 features, it has become much more important that things be configurable. By default, Babel 6.x does not perform any transformations. You need to tell it what transformations to run:

npm install babel-preset-env

and run

babel --presets env proxy.js --out-file proxified.js

or create a .babelrc file containing

{
    "presets": [
        "env"
    ]
}

and run it just like you were before.

env in this case is a preset which basically says to compile all standard ES* behavior to ES5. If you are using Node versions that support some ES6, you may want to consider doing

{
    "presets": [
        ["env", { "targets": { "node": "true" } }],
    ]
}

to tell the preset to only process things that are not supported by your Node version. You can also include browser versions in your targets if you need browser support.

Answer 2

npm install --save-dev babel-preset-node5

npm install --save-dev babel-preset-react

...and then creating a .babelrc with the presets:

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

...resolved a very similar issue for me, with babel 3.8.6, and node v5.10.1

https://www.npmjs.com/package/babel-preset-node5
https://www.npmjs.com/package/babel-preset-react

Answer 3

fix your .babelrc

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

Answer 4

Most of these answers are obsolete. @babel/preset-env and "@babel/preset-react are what you need (as of July 2019).

Answer 5

First ensure you have the following node modules:

npm i -D webpack babel-core babel-preset-es2015 babel-preset-stage-2 babel-loader

Next, add this to your Webpack config file (webpack.config.js) :

// webpack.config.js
...
module  :  {
  loaders  :  [
    {
      test    :  /\.js$/,
      loader  :  'babel',
      exclude :  /node_modules/,
      options :  {
        presets  :  [ 'es2015', 'stage-2' ] // stage-2 if required
      } 
    } 
  ]
}
...

References:

• https://gist.github.com/Couto/6c6164c24ae031bff935
• https://github.com/babel/babel-loader/issues/214

Good Luck!

Answer 6

As of 2020, Jan:

STEP 1: Install the Babel presets:

yarn add -D @babel/preset-env @babel/preset-react

STEP 2: Create a file: babelrc.js and add the presets:

module.exports = {
  // ...
  presets: ["@babel/preset-env", "@babel/preset-react"],
  // ...
}

STEP 3:- Install the babel-loader:

yarn add -D babel-loader

STEP 4:- Add the loader config in your webpack.config.js:

{
//...
  module: [
    rules: [
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      loader: require.resolve('babel-loader')
    ]
  ]
//...
}

Good Luck...