babel-es2015和es2017预设无法一起使用

Question

I have two js files : play.js and myStore.js .

I want to import code from myStore.js into play.js and use it there. I'm using es2015 plugin for the import, But it makes my es2017 friendly code fail, even though I have es2017 setup.

play.js :

import G from '../functions/myStore.js'; // import needs es2015

// this works with es2017, but not when es2015 is also included
for(k in [1,2,3]) console.log(k) 

myStore.js

var G = {}
export default G

Output :
If I did not import anything, and just used the es2017 preset, this would run fine, but using es2015 along with es2017 makes this fail as below:

for (k in [1, 2, 3]) {
     ^
ReferenceError: k is not defined

I'm executing this from terminal via npm start . Here's my package.json :

{
  "name": "functions",
  "version": "1.0.0",
  "description": "",
  "main": "play.js",
  "scripts": {
    "start": "babel-node play.js"
  },
  "author": "Somjit",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-es2015-node5": "^1.2.0",
    "babel-preset-es2017": "^6.22.0"
  }
}

and my babel.rc :

{ "presets": ["es2015", "es2017"] }

Answer 1

Ok. My short answer would be...

1) Babel reads your code and if it sees some new js feature it translate it to regular js by using presets. For example, if it sees let a = 1 Babel uses preset-es2015 (that knows what let is) and translate this line into var a = 1 so your browser could understand this line.

2) If you look to the docs of babel-preset-es2017 you'll see that it supports only two features. You have not this features in your code. So babel don't use this preset while reading code that you've provided. So es2017 don't matter in your problem.

3) If you run your code without es2015 it allows you to declare variables without var (because you can do this in js without strict mode). But when you use this preset Babel reads your code and trows an Error because according to new js standarts you need to declare variables with var, let or const and can't just write a = 1 ;

Answer 2

when I started with babel even small stuff where taking too much time to understand. then I found this tutorial which helped me a lot.

Answer 3

In Your case, absolutely your problem is not babel-preset-es2017 . you must install babel-plugin-transform-runtime and put it in your .babelrc file as plugin.

installing:

npm install --save-dev babel-plugin-transform-runtime

setting .babelrc file:

{
  "presets": [
    "es2015",
    "es2017"
  ],
  "plugins": [
    "transform-runtime"
  ]
}