title: How to include corejs polyfills with production bundle?
body: <p>I'm using <code>eleventy</code> to create a static site with a sprinkle of JavaScript. I'm <em>not</em> using <code>webpack</code> or other bundlers. JavaScript is transpiled by calling 'transformFileAsync' via <code>eleventy</code>s <code>beforeBuild</code> event. Here's the relevant part of <code>eleventy</code> config:</p>
  <pre><code>babel.transformFileAsync(&quot;src/assets/js/index.js&quot;).then((result) =&gt; {
        fs.outputFile(&quot;dist/assets/main.js&quot;, result.code, (err) =&gt; {
          if (err) throw err;
          console.log(&quot;JS transpiled.&quot;);
        });
      });
  </code></pre>
  <p>My <code>babel.config.js</code> is as follows:</p>
  <pre><code>module.exports = (api) =&gt; {
    api.cache(true);
  
    const presets = [
      [
        &quot;@babel/preset-env&quot;,
        {
          bugfixes: true,
          modules: &quot;systemjs&quot;,
          useBuiltIns: &quot;usage&quot;,
          corejs: { version: 3, proposals: true },
        },
      ],
    ];
  
    const plugins = [];
  
    return { presets, plugins };
  };
  </code></pre>
  <p>Babel works as advertised and transpiles my <code>js</code> just fine. But I can't figure out how I can include (without help from a bundler) <code>corejs</code> polyfills in the final production bundle.</p>
  <p>For example, the following code:</p>
  <pre><code>Array.from(document.getElementsByTagName(&quot;p&quot;)).forEach((p) =&gt; {
    console.log(`p ${index}, startsWith('W')`, p, p.innerHTML.startsWith(&quot;W&quot;));
  });
  </code></pre>
  <p>Is transpiled to:</p>
  <pre><code>import &quot;core-js/modules/es.array.for-each&quot;;
  import &quot;core-js/modules/es.array.from&quot;;
  import &quot;core-js/modules/es.string.iterator&quot;;
  import &quot;core-js/modules/es.string.starts-with&quot;;
  import &quot;core-js/modules/web.dom-collections.for-each&quot;;
  System.register([], function (_export, _context) {
    &quot;use strict&quot;;
  
    return {
      setters: [],
      execute: function () {
        Array.from(document.getElementsByTagName(&quot;p&quot;)).forEach(function (p) {
          console.log(&quot;p &quot;.concat(index, &quot;, startsWith('W')&quot;), p, p.innerHTML.startsWith(&quot;W&quot;));
        });
      }
    };
  });
  </code></pre>
  <p>How would I go about having the actual polyfill in the final bundle instead of all the <code>import</code>s?</p>