DEV Community

loading...
Cover image for LocalPen: Importing NPM Modules

LocalPen: Importing NPM Modules

hatemhosny profile image Hatem Hosny ・2 min read

This is a part of the series: LocalPen - code pens that run locally!

LocalPen is a powerful frontend coding playground that runs totally on the client and can be hosted on any static file server. Try it now on localpen.io

In LocalPen you can use node-style non-relative imports for node modules like you do in your local development. Yet, there is no build step.

e.g. consider the following code: (try it here)

import { v4 } from 'uuid';

document.body.innerHTML = v4();
Enter fullscreen mode Exit fullscreen mode

If you run it in regular web page, you get this error:

Uncaught TypeError: Failed to resolve module specifier "uuid". Relative references must start with either "/", "./", or "../".
Enter fullscreen mode Exit fullscreen mode

However, in LocalPen, all non-relative imports are converted on-the-fly to use the great service of skypack.dev.

So

import { v4 } from 'uuid';
Enter fullscreen mode Exit fullscreen mode

gets converted to

import { v4 } from 'https://cdn.skypack.dev/uuid';
Enter fullscreen mode Exit fullscreen mode

You can import React like that: (Demo)

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
Enter fullscreen mode Exit fullscreen mode

It just works without a build step and without you having to worry about. And when you export your code to another service (e.g CodePen or JSFiddle), the full url imports are used, so your code continue to work elsewhere.

It is recommended to use this method for dependencies over using external scripts. The dependencies are explicitly stated in the code. And if you move to a local development environment, your bundler will take care of importing them and doing other optimizations like tree-shaking.

If you still wish to add external stylesheets or scripts you can do that from the UI (settings menu > External CSS/JS).

Discussion (0)

pic
Editor guide