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
Versions
React v16
Babel v6.15.0
Adios v0.18.0