Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Importing NPM Modules to the Web as ES6 Modules

DZone's Guide to

Importing NPM Modules to the Web as ES6 Modules

In this post, I want to share the method that I used to import nearly any NPM module into a front-end project using ES6 Modules.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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 rollup config that I used to import nearly any NPM module into a front-end project using ES6 Modules.

I needed a quick way to import a simple module get-urls 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 (require).

I couldn’t find a lot of guidance on what to do here, so I went to experiment and this solution is the solution I came across:

  1. Create a file that imports the NPM module I needed. module.exports = require('get-urls'); This module will be what converted to ES6 style.
  2. Create a rollup config that:
    1. Imports the node globals, and built-ins.
    2. Resolves all npm modules required for my usage of this module.
    3. Pass the results through the commonjs plugin so that it’s now in ES6 Module format.
    4. Compress the output, because it’s huge. 
  3. Include the bundled file in your project and rejoice.
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
import closure from 'rollup-plugin-closure-compiler-js';

export default {
  input: 'static/javascripts/get-urls.js',
  output: {
      file: 'static/javascripts/get-urls.bundle.js',
      format: 'es',
      browser: true
    },
  plugins: [
    globals(),
    builtins(),
    resolve({
      preferBuiltins: false,
      browser: true,
      // pass custom options to the resolve plugin
      customResolveOptions: {
        moduleDirectory: 'node_modules'
      }
    }),
    commonjs(),
    closure({
      compilationLevel: 'WHITESPACE',
      languageIn: 'ES6',
      languageOut: 'ES6'
    })
  ]
};

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.

<script type="module">
    import getUrls from '/javascripts/get-urls.bundle.js';
    ...

Neat!

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:
web dev ,npm ,tutorial ,javascript ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}