title: How to compile ES6 modules with Google's Closure Compiler
body: <p>I have been reviewing the code for a past project prior to implementing some new features. One of the objectives was to simplify the management of the code by migrating it to ES6 modules. This has gone well, and makes life a great deal easier.</p>
  
  <p>However, during the process of building the final application we have been using Google's Closure Compiler to minify the code. This was working well, but now...</p>
  
  <p>Take this sample HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;HTML file to test compilation of JS modules&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script src="JSModule1.js" type="module"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and add these two modules</p>
  
  <p><strong>JSModule1.js</strong></p>
  
  <pre><code>import {Thing} from './JSModule2.js'
  
  let item = new Thing('Something');
  let otherItem = new Thing();
  
  item.speak();
  otherItem.speak();
  </code></pre>
  
  <p><strong>JSModule2.js</strong></p>
  
  <pre><code>function Thing(word) {
      let words = (word || "I've nothing to say.");
      this.speak = function() {
          console.log(words);
      }
  }
  
  export {Thing}
  </code></pre>
  
  <p>If I try to compile just <code>JSModule1.js</code> I get an error:</p>
  
  <p><code>JSC_JS_MODULE_LOAD_WARNING: Failed to load module "./JSModule2.js"</code></p>
  
  <p>If I tweak the load process to submit both files in the same compilation I get a monolithic block of code incorporating both modules:</p>
  
  <pre><code>function Thing$$module$JSModule2(a){var b=a||"I've nothing to say.";this.speak=function(){console.log(b)}}var module$JSModule2={};module$JSModule2.Thing=Thing$$module$JSModule2;var item$$module$JSModule1=new Thing$$module$JSModule2("Something"),otherItem$$module$JSModule1=new Thing$$module$JSModule2;item$$module$JSModule1.speak();otherItem$$module$JSModule1.speak();var module$JSModule1={};
  </code></pre>
  
  <p>This is what's sent to the compiler in the query string:</p>
  
  <pre><code>compilation_level=SIMPLE_OPTIMIZATIONS&amp;output_format=xml&amp;output_info=compiled_code&amp;language=ECMASCRIPT6_STRICT&amp;js_code%3A.%2FJSModule1.js=import+%7BThing%7D+from+%27.%2FJSModule2.js%27%0A%0Alet+item+%3D+new+Thing%28%27Something%27%29%3B%0Alet+otherItem+%3D+new+Thing%28%29%3B%0A%0Aitem.speak%28%29%3B%0AotherItem.speak%28%29%3B&amp;js_code%3A.%2FJSModule2.js=function+Thing%28word%29+%7B%0A++++let+words+%3D+%28word+%7C%7C+%22I%27ve+nothing+to+say.%22%29%3B%0A++++this.speak+%3D+function%28%29+%7B%0A++++++++console.log%28words%29%3B%0A++++%7D%0A%7D%0A%0Aexport+%7BThing%7D%0A&amp;output_info=errors&amp;output_info=warnings&amp;output_info=statistics
  </code></pre>
  
  <p>So, if I want to compile just one module I can't do it. I have to compile it along with any modules it imports. If I do this for a set of modules that each have a number of dependencies then I could end up with <strong>more</strong> code than if I hadn't compiled them in the first place. </p>
  
  <p>The only approach seems to be to compile the whole application at once, and live with the resulting single block of code. </p>
  
  <p>Now, it seems that I can compile just <code>JSModule2.js</code> without an error, but for the real application the modules have at least one further dependency, and sometimes more, so once again I'm back to compiling the whole thing.</p>
  
  <p><strong>Question:</strong> Is there some way I can get the Closure Compiler to compile modules without compiling all the dependencies at the same time?</p>