<p dir="auto">Sorry for my poor English~<br>
My project dependencies are:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" &quot;devDependencies&quot;: {
    &quot;babel-core&quot;: &quot;^6.24.0&quot;,
    &quot;babel-loader&quot;: &quot;^6.4.0&quot;,
    &quot;babel-preset-env&quot;: &quot;^1.2.1&quot;,
    &quot;babel-preset-es2015&quot;: &quot;^6.24.0&quot;,
    &quot;html-webpack-plugin&quot;: &quot;^2.28.0&quot;,
    &quot;webpack&quot;: &quot;^2.2.1&quot;,
    &quot;webpack-dev-server&quot;: &quot;^2.4.1&quot;
  }"><pre class="notranslate"><code class="notranslate"> "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.0",
    "babel-preset-env": "^1.2.1",
    "babel-preset-es2015": "^6.24.0",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
</code></pre></div>
<p dir="auto">And the webpack.config.js  has a loader :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="     test: /\.(js|jsx)/,
     use: &quot;babel-loader?presets[]=env&quot;,
     exclude: /(node_modules|idea)/"><pre class="notranslate"><code class="notranslate">     test: /\.(js|jsx)/,
     use: "babel-loader?presets[]=env",
     exclude: /(node_modules|idea)/
</code></pre></div>
<p dir="auto">the code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="for (let i = 0; i &lt; 3; console.log(i),i++) {
            let i = &quot;abc&quot;;
            console.log(i);
}"><pre class="notranslate"><code class="notranslate">for (let i = 0; i &lt; 3; console.log(i),i++) {
            let i = "abc";
            console.log(i);
}
</code></pre></div>
<p dir="auto">expected result:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="abc
0
abc
1
abc
2"><pre class="notranslate"><code class="notranslate">abc
0
abc
1
abc
2
</code></pre></div>
<p dir="auto">but output</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="abc
abc"><pre class="notranslate"><code class="notranslate">abc
abc
</code></pre></div>
<p dir="auto">Is that a BUG?</p>
<blockquote>
<p dir="auto">Issue originally made by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bergus/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bergus">@bergus</a></p>
</blockquote>
<h3 dir="auto">Bug information</h3>
<ul dir="auto">
<li><strong>Babel version:</strong> v6.x (babel.io/repl)</li>
</ul>
<h3 dir="auto">Options</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="plain preset es-2015, nothing else"><pre class="notranslate"><code class="notranslate">plain preset es-2015, nothing else
</code></pre></div>
<h3 dir="auto">Input code</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;use strict&quot;;
function foo1() {
  for (let bar = 2; bar &lt; 3; bar++) {
    let bar = 4;
  }
}
function foo2() {
  var bar;
  for (let bar = 2; bar &lt; 3; bar++) {
    let bar = 4;
  }
}"><pre class="notranslate"><code class="notranslate">"use strict";
function foo1() {
  for (let bar = 2; bar &lt; 3; bar++) {
    let bar = 4;
  }
}
function foo2() {
  var bar;
  for (let bar = 2; bar &lt; 3; bar++) {
    let bar = 4;
  }
}
</code></pre></div>
<p dir="auto">[[ https://babeljs.io/repl/#?evaluate=true&amp;lineWrap=false&amp;presets=es2015&amp;code="use%20strict"%3Bfunction%20foo1()%20{%20%20for%20(let%20bar%20%3D%202%3B%20bar%20&lt;%203%3B%20bar%2B%2B)%20{%20%20%20%20let%20bar%20%3D%204%3B%20%20}}function%20foo2()%20{%20%20var%20bar%3B%20%20for%20(let%20bar%20%3D%202%3B%20bar%20&lt;%203%3B%20bar%2B%2B)%20{%20%20%20%20let%20bar%20%3D%204%3B%20%20}} | produces ]]</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;use strict&quot;;

function foo1() {
  for (var bar = 2; bar &lt; 3; bar++) {
    var bar = 4;
  }
}
function foo2() {
  var bar;
  for (var bar = 2; bar &lt; 3; bar++) {
    var _bar = 4;
  }
}"><pre class="notranslate"><code class="notranslate">"use strict";

function foo1() {
  for (var bar = 2; bar &lt; 3; bar++) {
    var bar = 4;
  }
}
function foo2() {
  var bar;
  for (var bar = 2; bar &lt; 3; bar++) {
    var _bar = 4;
  }
}
</code></pre></div>
<h3 dir="auto">Description</h3>
<p dir="auto">In <code class="notranslate">foo1</code> it should produce two different <code class="notranslate">bar</code> variables - the one in the body of the loop is block-scoped and not the same as the one created by the loop. See also <a href="http://stackoverflow.com/q/37855990/1048572" rel="nofollow">http://stackoverflow.com/q/37855990/1048572</a></p>
<p dir="auto">Now that might be a simple bug, but it's getting weird in <code class="notranslate">foo2</code> where a function-level <code class="notranslate">bar</code> is introduced (both <code class="notranslate">let</code> and <code class="notranslate">var</code> and parameters reproduce this). Here the <code class="notranslate">bar</code> variables of the loop and the body are indeed separated as expected, but the one of the loop header collides with the function-scope one. This does usually work - as long as there is no <code class="notranslate">let</code> declaration in the loop body.</p>