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