

In the background we perform static analysis on the contents of the current file, generating a dependency graph and surfacing insights on the right-hand side panel.
Lodash cdn unpkg code#
Front and center we render a syntax-highlighted representation of the code itself to make it much more human readable. In the navigational panel to the left we display package information and directory structure, which enables quick switching between files. Runpkg turns a static file into an interactive and information-rich browsing experience. So, how do you use runpkg? Well, just prefix any unpkg url with r! That's why we've built runpkg: the online package explorer. Make the impact of importing packages more transparent.

We took inspiration from tools like Bundlephobia, Octolinker, and Githistory, whilst we asked ourselves: What are the most useful and impactful functionalities we might need in a CDN-driven package/module era? We wanted to help in this regard by developing a tool that makes it easier to analyze and understand the code your application depends on. Nobody reads through their entire node_modules directory, but as responsible developers, we should be aware of the implications of pulling in third-party dependencies, especially when doing it at runtime.

You have no idea what those files are doing and if they have dependencies of their own. However, all you are presented with is a file that potentially depends on some other files. To begin to get an idea of what is going on under the hood you could visit the package url at and manually inspect the file. Truly understanding the impact of your imports is hard. May appear pretty harmless on the surface, but it set in motion a recursive dependency resolution process that runs client-side and that-in this particular case-results in more than 600 files (~600KB) being requested, downloaded, and evaluated by the browser. When importing a script from the internet (rather than installing it locally with npm or yarn) it is very easy to pull in more than you bargained for. We have been experimenting with this methodology and new tooling for a while now, but wanted to improve the overall developer experience making it easier to work with and generally more welcoming to newcomers.
Lodash cdn unpkg free#
While build step free single-page web apps are still on the bleeding edge, these numbers hint at great demand and demonstrate that there is tremendous infrastructure in place to support this approach. Despite being somewhat under the radar, unpkg is a big deal and serves up more scripts than you would believe!įrom April 3 to unpkg served 16,811,631,733 requests and a total of 213 TB of data to 1,500,325,458 unique visitors, 99.16% of which were served from the cache. Unpkg was created and is maintained by Michael Jackson from React Training its sponsors include CloudFlare and Google (via the Angular project). The benefits of this are amplified by CDN services such as unpkg. TLDR You can now import JavaScripts directly from your JavaScripts in the browser, at runtime. Our source code is becoming our distributed code! Now that ES6 modules are well on their way to being supported by all evergreen browsers, we may no longer need to build and bundle our JavaScript code using complex and proprietary tooling. We are seeing advances in browser technologies that have the potential to change the way we write applications on the web.
