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

output ：
如果我没有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 Standarts，您需要用VAR，LET或CONST声明变量，并且不能仅仅写a = 1;

Answer 2

当我从babel开始时，甚至花太多时间才能理解。然后我找到了这个教程，对我有很大帮助。

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"
  ]
}