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.
Join the DZone community and get the full member experience.
Join For FreeI’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:
- Create a file that imports the NPM module I needed.
module.exports = require('get-urls');
This module will be what converted to ES6 style. - Create a
rollup
config that:- Imports the node globals, and built-ins.
- Resolves all npm modules required for my usage of this module.
- Pass the results through the
commonjs
plugin so that it’s now in ES6 Module format. - Compress the output, because it’s huge.
- 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!
Published at DZone with permission of Paul Kinlan, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments