<p dir="auto">One of the benefits of using <code class="notranslate">{ loose: ["es6.modules"] }</code> is that <code class="notranslate">import</code> statements don't have to appear at the top level.</p>
<p dir="auto">However, references to variable bindings created by nested <code class="notranslate">import</code> statements appear not to be rewritten:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function test() {
  import x, {y as z} from &quot;some/module&quot;;
  console.log(x, z);
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">import</span> <span class="pl-s1">x</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-s1">y</span> <span class="pl-k">as</span> <span class="pl-s1">z</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"some/module"</span><span class="pl-kos">;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">,</span> <span class="pl-s1">z</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">becomes</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;use strict&quot;;

function _interopRequireDefault(obj) { return obj &amp;&amp; obj.__esModule ? obj : { &quot;default&quot;: obj }; }

function test() {
  var _someModule = require(&quot;some/module&quot;);
  var _someModule2 = _interopRequireDefault(_someModule);
  console.log(x, z);
}"><pre class="notranslate"><span class="pl-s">"use strict"</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-en">_interopRequireDefault</span><span class="pl-kos">(</span><span class="pl-s1">obj</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s1">obj</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">obj</span><span class="pl-kos">.</span><span class="pl-c1">__esModule</span> ? <span class="pl-s1">obj</span> : <span class="pl-kos">{</span> <span class="pl-s">"default"</span>: <span class="pl-s1">obj</span> <span class="pl-kos">}</span><span class="pl-kos">;</span> <span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">_someModule</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"some/module"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">var</span> <span class="pl-s1">_someModule2</span> <span class="pl-c1">=</span> <span class="pl-en">_interopRequireDefault</span><span class="pl-kos">(</span><span class="pl-s1">_someModule</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">,</span> <span class="pl-s1">z</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">I would expect this code to become something like</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function test() {
  var _someModule = require(&quot;some/module&quot;);
  var _someModule2 = _interopRequireDefault(_someModule);
  console.log(_someModule2[&quot;default&quot;], _someModule.y);
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">_someModule</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"some/module"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">var</span> <span class="pl-s1">_someModule2</span> <span class="pl-c1">=</span> <span class="pl-en">_interopRequireDefault</span><span class="pl-kos">(</span><span class="pl-s1">_someModule</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">_someModule2</span><span class="pl-kos">[</span><span class="pl-s">"default"</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-s1">_someModule</span><span class="pl-kos">.</span><span class="pl-c1">y</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">One misunderstanding I have about Babel is why the example on the homepage has <code class="notranslate">myOldWeirdJavaScript</code> as the input and <code class="notranslate">myNewTransformedJavaScript</code> as the ouput. Isn't it the other way around, ES6-&gt;ES5? Nowhere on the site does it actually say babel compiles ES6 into ES5, as obvious at that may be. I confusingly thought it compiles ES5-&gt;ES6 based on the example.</p>