yarn + unpkg for Quick Prototyping of Front End Applications

If I were working on a serious project right now, I’d init a project with yarn and start installing packages like webpack for it. But today I don’t want to do that, I just want to create a simple local project to mess around with ReactJS and some other javascript packages. I know I could do this in codepen, but I want to keep it local.

The npm repository and the CDN project at unpkg.com are my friends in a case like this.

It’s well known that you can set up a simple ReactJS project by loading react.js, react-dom.js, and babel from unpkg.com like this:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Now I want to load Axios, a package for making AJAX requests to get data from an API. This is where unpkg.com and npmjs.com help with shopping around for packages.

The unpkg.com site supports some well known URL formats that makes browsing like this easy. Opening the URL “https://unpkg.com/axios/” (the terminating slash is important) brings the browser to a standard default index page like this:

Index of /
 
Name              Type                   Size      Last Modified
CHANGELOG.md      text/markdown          14.08 kB  2018-02-19T23:22:19.000Z
LICENSE           text/plain              1.07 kB  2018-02-19T22:02:20.000Z
README.md         text/markdown          19.65 kB  2018-02-19T23:00:03.000Z
UPGRADE_GUIDE.md  text/markdown           4.81 kB  2018-02-10T20:56:09.000Z
dist              -                       -        -
index.d.ts        text/plain              3.44 kB  2018-02-19T22:02:20.000Z
index.js          application/javascript    40 B   2018-02-11T19:08:48.000Z
lib               -                       -        -
package.json      application/json        2.37 kB  2018-02-19T23:23:53.000Z
                                                               axios@0.18.0

The actual page that I arrived at was “https://unpkg.com/axios@0.18.0/”, the latest version of axios. There’s a very handy drop down menu at the top right corner of the page to browse to another version of the package if that’s what’s needed.

I looked at the “lib/” subdirectory first, but that seemed to be the build components of the library. Checking the dist/ subdirectory, I find built distributions:

Index of /dist/
 
Name           Type    Size    Last Modified
..             -    -    -
axios.js       application/javascript  42.74 kB    2018-02-19T23:23:58.000Z
axios.map      application/json        52.94 kB    2018-02-19T23:23:56.000Z
axios.min.js   application/javascript  12.94 kB    2018-02-19T23:23:58.000Z
axios.min.map  application/json       107.03 kB    2018-02-19T23:23:56.000Z
                                                               axios@0.18.0

As you can see from the first directory listing above, you can look at the contents of other files in the package: package.json, Gruntfile.js, and Readme.md. Though the markdown in Readme.md is raw, not formatted, it’s still readable for some general information.

npmjs.com offers a similar well-known URL format for browsing packages. Browsing to https://www.npmjs.com/package/axios gives the full documentation for the package, formatted.

Anyway, having browsed the structure of the axios package directory on unpkg.com, this was the correct URL to use to load axios in my local project:

<script src="https://unpkg.com/axios@0.18.0/dist/axios.js"></script>

If you were unsure about the exact name of a package, you could go to “https://npmjs.com” and enter some terms into the “Search packages” field at the top of the page. Or you could go to a terminal command line and search for packages with “npm info” (as far as I know, “yarn” doesn’t offer similar “info” feature).

Not all packages come with prebuilt versions. It depends on how the project for the package is organized. For instance, the “fetch” package for loading AJAX data does not come prebuilt. It is set up to be built as part of a larger project that uses a packager like webpack and the Babel transpiler to convert ES6 syntax to more portable Javascript that can run in the browser. Everything that’s present in npmjs.org seems to be available on unplug.com.

TL; DR

The websites for npm and unpkg offer convenient tools to shop around for javascript packages:

  • “http://unpkg.com/packagename/” to browse the package project’s directory structure
  • “http://npmjs.com/packagename” to find formatted documentation on the package
  • “http://unpkg.com/packagename@<verno>/somedirectory/somefilename.js” to load the package in a <script> tag

References

npmjs.com
unpkg.com

Versions

React v16
Babel v6.15.0
Adios v0.18.0

Add a Comment

Your email address will not be published.