This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
<p>I've been working on a way to make it easier to push content into my static site
and it's been a fun little exercise that I will share more in another post. In
this post I want to share the <code>rollup</code> config that I used to import nearly any
npm module in to a frontend project using JavaScript modules.</p>
<p>I needed a quick way import a simple module <code>get-urls</code> into my project. The
module is well tested and it does what I needed ... ignore the fact that it's
pretty easy to implement in a couple of lines of JavaScript. The problem I had
is that my project is built in ES6, uses modules and I didn't want to have to
bundle up using CommonJS (<code>require</code>).</p>
<p>I couldn't find a lot of guidance on what to do here, so I went to experiement
and this solution is the solution I came across:</p>
<ol>
<li>Create a file that imports the npm module I needed. <code>module.exports = require('get-urls');</code> This module will be what's converted to ES6 style.</li>
<li>Create a rollup config that
<ol>
<li>Imports the node globals, and builtins.</li>
<li>Resolves all npm modules required for my usage of this module.</li>
<li>Pass the results through the <code>commonjs</code> plugin so that it's now in
JavaScript module format.</li>
<li>Compress the output, because it's huge :\</li>
</ol>
</li>
<li>Include the bundled file in your project and rejoice.</li>
</ol>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">resolve</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">'rollup-plugin-node-resolve'</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">commonjs</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">'rollup-plugin-commonjs'</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">builtins</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">'rollup-plugin-node-builtins'</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">globals</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">'rollup-plugin-node-globals'</span>;
<span style="color:#66d9ef">import</span> <span style="color:#a6e22e">closure</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">'rollup-plugin-closure-compiler-js'</span>;
<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> {
<span style="color:#a6e22e">input</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'static/javascripts/get-urls.js'</span>,
<span style="color:#a6e22e">output</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">file</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'static/javascripts/get-urls.bundle.mjs'</span>,
<span style="color:#a6e22e">format</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'es'</span>,
<span style="color:#a6e22e">browser</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>
},
<span style="color:#a6e22e">plugins</span><span style="color:#f92672">:</span> [
<span style="color:#a6e22e">globals</span>(),
<span style="color:#a6e22e">builtins</span>(),
<span style="color:#a6e22e">resolve</span>({
<span style="color:#a6e22e">preferBuiltins</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
<span style="color:#a6e22e">browser</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>,
<span style="color:#75715e">// pass custom options to the resolve plugin
</span><span style="color:#75715e"></span> <span style="color:#a6e22e">customResolveOptions</span><span style="color:#f92672">:</span> {
<span style="color:#a6e22e">moduleDirectory</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'node_modules'</span>
}
}),
<span style="color:#a6e22e">commonjs</span>(),
<span style="color:#a6e22e">closure</span>({
<span style="color:#a6e22e">compilationLevel</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'WHITESPACE'</span>,
<span style="color:#a6e22e">languageIn</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'ES6'</span>,
<span style="color:#a6e22e">languageOut</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'ES6'</span>
})
]
};
</code></pre></div><p>I think there are probably better ways than this, the output for what is a
relatively simple function is huge (70kb), but it now means that I can
use modules from npm directly in my page.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-fallback" data-lang="fallback"><script type="module">
import getUrls from '/javascripts/get-urls.bundle.mjs';
...
</code></pre></div><p>Neat...</p>
This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
