Skypack is super cool. It’s a CDN for JavaScript packages, meaning you use whatever you like from npm without needing to run a bundler. It uses regular ol’ ES6 imports (seems like the are most commonly referred to as “ES Modules” so let’s roll with that) with fully qualified URLs. It’s essentially the package name prefixed by a Skypack URL (and suffixed with any valid SemVer). Here I’ve sniped the demo from their homepage:
My favorite part of their system is this bullet point from their technical details:
Upconverts old Node packages to modern ES Modules
That means that even if the package on npm wasn’t designed for the ES Modules and native browser import behavior, Skypack converts them to be ready. Wonderful! That means you can use anything you want from npm on CodePen. Assuming that it’s a package that’s meant to be used in the browser and not specifically Node, that is.
We’ll help you find packages
There are a number of ways to use Skypack and find the correct URL for the package you want to import:
- Use Skypack’s own search
- If you know the package name, the URL is like:
https://cdn.skypack.dev/package-name - Use our search!
We put package search right in the JavaScript settings for all your Pens.
Here’s a little video showing you how easy it is to add a package like styled-components to a Pen:
Other things to know about importing
Every package is different
It’s usually helpful to console.log() what you get back so you can see what’s in there, like:
import x from "https://cdn.skypack.dev/package-name";
console.log(x);If that’s null, you might try:
import * as x from "https://cdn.skypack.dev/package-name";
console.log(x);I depends on if there is a default export or not (I think). See how React and Preact are different here:
React and JSX
If you want to write in JSX on CodePen, you have to flip on Babel as the JavaScript preprocessor. That will turn the otherwise-invalid angle brackets in JavaScript into React-style createElement functions (as well as polyfill a bit of future JavaScript stuff).
The trick is that the JSX transformations end up like React.createElement(), so you have to make sure React is defined, meaning you have to import React named like:
import React from 'https://cdn.skypack.dev/react;Example:
Using CSS from Packages
We don’t have a great way to explore other assets that are in packages and get the URLs to them (yet), but you do have access to those assets through Skypack. For example, Stephen’s splitting.js is on npm. You can see the repo here. You can see there is an (important) CSS file at /dist/splitting.css here. So if you combine the Skypack package URL with that path, you get:
https://cdn.skypack.dev/splitting/dist/splitting.cssWhich properly returns that CSS you can use. Which means you could use that in your CSS external resources:
Package Errors
You’ll see import statements in this format around the web:
import React from "react";That’s an import statement that assumings you’re on a machine that is running npm install (or the like) and that the dependencies are downloaded into a node_modules folder and that you’ll be running a bundler (webpack or the like) to produce the final usable JavaScript.
That won’t work on CodePen. If you do type an import statement like the example above, it will error.
But that’s the beauty of Skypack, prepend https://cdn.skypack.com/ before “react” and you’re all set.
Skypack in Projects
Skypack works excellently in Pens, as you’ve seen, but we’ve made it work in Projects too. Remember that these Skypack import statements are just valid ES Modules syntax, so we don’t actually have to do anything special to make them work.
If you turn on bundling in Project Settings, your import statements for Skypack (and any other URL import) will be left alone, but your other local imports will be bundled.
Script Type
In order to use import in JavaScript, the <script> that that runs that JavaScript needs to be <script type="module">. You don’t have to worry about that in Pens. If we see an import statement, we’ll do that automatically for you. But in Projects, it’s on you. So remember…
<script type="module" src="./index.js"></script>React & JSX in Projects
If you want to use JSX in Projects, you’ve got to flip on the bundler in your Project Settings:
Versioning
Skypacks supports any valid SemVer syntax. Here’s some examples to make that clear…
| package@1.2.3 package@v1.2.3 | This exact version. Optional “v” for “version” (same as above) |
| package@~1.2.3 | Use 1.2.3 or a higher version, but don’t go up to 2.x.x |
| package@^1.2.3 | Use 1.2.3 or a higher version, but don’t go up to 1.3.x |
| package@^1 package@~1 package@1.* package@1 | Use 1.0.0 or a higher version, but don’t go up to 2.x.x |
CodePen’s default will be to insert at an exact version number so that nothing will change under your feet. You are, of course, free to use whatever you like by editing the URL in your JavaScript code. For example, you may want your packages to update to newer versions.
Podcasts
We’ve talked about all this fun stuff on the podcast recently:
Lots of Examples
Here’s a Collection of examples of Pens using Skypack. Fun!
The post Skypack + CodePen appeared first on CodePen Blog.