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

Question

我有两个js文件： play.js和myStore.js 。

我想将代码从myStore.js导入play.js并在其中使用。 我正在使用es2015插件进行导入，但这会导致我的es2017友好代码失败，即使我具有es2017设置也是如此。

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

输出 ：
如果我不import任何东西，只是用es2017预设，这会运行良好，但使用es2015随着es2017使得这款如下失败：

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

我正在通过npm start从终端执行此操作。 这是我的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"
  }
}

和我的babel.rc ：

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

Answer 1

好。 我的简短答案是...

1）Babel读取您的代码，如果看到一些新的js功能，则会通过使用预设将其转换为常规js。 例如，如果看到let a = 1 Babel使用preset-es2015 （知道let是什么）并将此行转换为var a = 1以便您的浏览器可以理解此行。

2）如果查看babel-preset-es2017的文档 ，您会看到它仅支持两个功能。 您的代码中没有此功能。 因此，babel在阅读您提供的代码时不要使用此预设。 因此es2017对您的问题无关紧要。

3）如果在不使用es2015的情况下运行代码，则允许您声明不带var的变量（因为您可以在js中不使用严格模式进行此操作）。 但是，当您使用此预设时，Babel会读取您的代码并抛出错误，因为根据新的js标准，您需要使用var，let或const声明变量，而不能只写a = 1 ;

Answer 2

当我从巴别塔开始时，甚至是很小的东西，花了太多时间去理解。 然后我发现本教程对我有很大帮助。

Answer 3

就您而言，您的问题绝对不是babel-preset-es2017 。 您必须安装babel-plugin-transform-runtime并将其作为插件放入.babelrc文件中。

安装：

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

设置.babelrc文件：

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