# Importing a frontend Javascript library without a build system

DevFeed: [Importing a frontend Javascript library without a build system](<https://devfeed.tech/articles/importing-a-frontend-javascript-library-without-a-build-system-21113.md>)

Original publisher: [Read original article](<https://jvns.ca/blog/2024/11/18/how-to-import-a-javascript-library/>)

Author: Julia Evans

Published: 2024-11-18T09:35:42Z

Content type: tutorial

Language: en

Sources: [Julia Evans](<https://devfeed.tech/sources/julia-evans.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Library](<https://devfeed.tech/topics/library.md>), [CommonJS](<https://devfeed.tech/topics/commonjs.md>), [npm](<https://devfeed.tech/topics/npm.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Code](<https://devfeed.tech/topics/code.md>), [Script](<https://devfeed.tech/topics/script.md>), [cdnjs](<https://devfeed.tech/topics/cdnjs.md>)

Tags: [3](<https://devfeed.tech/tags/3.md>), [amd](<https://devfeed.tech/tags/amd.md>), [browser](<https://devfeed.tech/tags/browser.md>), [cdn](<https://devfeed.tech/tags/cdn.md>), [code](<https://devfeed.tech/tags/code.md>), [commonjs](<https://devfeed.tech/tags/commonjs.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [library](<https://devfeed.tech/tags/library.md>), [npm](<https://devfeed.tech/tags/npm.md>)

## AI overview

A practical guide to importing JavaScript libraries in frontend code without a build system. It explains the differences among classic global-variable files, ES modules, and CommonJS modules, and describes how to identify and use the formats a library provides through its NPM build and CDN distribution.

## Source excerpt

I like writing Javascript without a build system and for the millionth time yesterday I ran into a problem where I needed to figure out how to import a Javascript library in my code without using a build system, and it took FOREVER to figure out how to import it because the library's setup instructions assume that you're using a build system. Luckily at this point I've mostly learned how to navigate this situation and either successfully use the library or decide it's too difficult and switch to a different library, so here's the guide I wish I had to importing Javascript libraries years ago. I'm only going to talk about using Javacript libraries on the frontend, and only about how to use them in a no-build-system setup. In this post I'm going to talk about: the three main types of Javascript files a library might provide (ES Modules, the "classic" global variable kind, and CommonJS) how to figure out which types of files a Javascript library includes in its build ways to import each type of file in your code the three kinds of Javascript files There are 3 basic types of Javascript files a library can provide: the "classic" type of file that defines a global variable. This is the kind of file that you can just <script src> and it'll Just Work. Great if you can get it but not always available an ES module (which may or may not depend on other files, we'll get to that) a "CommonJS" module. This is for Node, you can't use it in a browser at all without using a build system. I'm not sure if there's a better name for the "classic" type but I'm just going to call it "classic". Also there's a type called "AMD" but I'm not sure how relevant it is in 2024. Now that we know the 3 types of files, let's talk about how to figure out which of these the library actually provides! where to find the files: the NPM build Every Javascript library has a build which it uploads to NPM. You might be thinking (like I did originally) - Julia! The whole POINT is that we're not using Node to